CSS Div Positioning - 打破包装纸高度(CSS Div Positioning - Breaks wrapper height)
当我将div放在其他div中时，我有一个不寻常的问题，我有我的主，一个孩子和两个（孙子），现在为了孩子的高度调整到孙子我已经通过浮动定位他们，浮动左和右浮，我的孩子定位绝对，现在我的主要宽度为980px，并以0自动边距为中心，一切似乎工作正常...我注意到我的主要没有高度它是0px，孩子是很好，高度适当调整浮动等，但我的min没有高度，如果我把它取出定位到屏幕的左边，我怎么会得到主要识别孩子，然后识别孙子，请帮助我已经尝试过清楚：既清楚又清楚：自动无济于事
CSS：
#wrapper { margin: 0 auto; width: 980px; } #wall { width: 980px; position: absolute; box-shadow: 0px 0px 10px 0px; border-radius: 50px; } #left { width: 610px; padding: 15px; float: left; } #leftimg { border-radius: 35px; float: right; width: 300px; height: 200px; padding: 8px; } #right { border: 1px solid black; width: 310px; left: 645px; padding: 5px; float: right; } footer { text-align: center; <!DOCTYPE html><h1>Top Tips for your C.V</h1> <p>Follow these tips, No messing straight to the point</p> <img src="web-pics/check.png" alt="checksheet"/> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">page 1</a></li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> </ul> </nav> </header> <div id="wrapper"> <div id="wall"> <div id="right"> <h2><u>Interactive</u></h2> <p>aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaa aaa aaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaa aaa aaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaa </p> </div> <div id="left"> <h1><u>Why do we need a CV?</u></h1> <img src="web-pics/despair.jpg" alt="Despair" id="leftimg" /> <p> Believe it or not, some people do not actually have a C.V, They believe that it is too much effort and that it is not worth the time putting one together. Well this could not be further from the truth, Indeed an employer will only look at your C.V briefly, so you may ask yourself what is the point in putting all that information on there if they are not going to read it properly. An employer is looking for something that will catch their eye, then they skim it over a little bit more, they look at your previous experience, and if they are still looking, they will want your contact details. A C.V is the first potential step into employment, Get this right and you may have yourself an Interview. </p> <h2><u>C.V Layout</u></h2> <p> The most important thing about your C.V is not so much the content, but how you have your layout. This is at least to start with, Remember that it needs to catch the eye of the person reading it. Unless you are applying for a role as a graphic designer, do not insert pictures, colours or other funny gimmicks, it needs to catch their eye and look professional. Use the page to your advantage though, The paper is white, the font is black, this can be a dull setting to start off with, why can't you add any colour to it, Think of it like this, you can add as much colour to it and images and other funny captions, but if the content is not as fulfilling as the colours, Then the employer may wish to employ someone who has taken the time to make their C.V Content an easier read, it can be difficult to read a C.V if it has clashing colours. </p> </div> </div> </div> <footer> <br /> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"></footer>I am having an unusual problem while positioning divs inside other divs, I have my main, a child and two ( grandchilds ), Now for the height of the child to adjust to the grandchild i have positioned them via float, Float left and float right,and my child is positioned absolute, now my main has a width of 980px and is centred with margin 0 auto, everything seems to work fine... I have noticed my main does not have a height it is at 0px, the child is fine, height adjusts to the floats properly etc but my min has no height, if i take it out the positioning goes to the left of the screen, How would i get the main to recognise the child, which then recognises the grandchildren, Please help i have tried clear: both and clear: auto to no avail
CSS:
#wrapper { margin: 0 auto; width: 980px; } #wall { width: 980px; position: absolute; box-shadow: 0px 0px 10px 0px; border-radius: 50px; } #left { width: 610px; padding: 15px; float: left; } #leftimg { border-radius: 35px; float: right; width: 300px; height: 200px; padding: 8px; } #right { border: 1px solid black; width: 310px; left: 645px; padding: 5px; float: right; } footer { text-align: center; <!DOCTYPE html>
<h1>Top Tips for your C.V</h1> <p>Follow these tips, No messing straight to the point</p> <img src="web-pics/check.png" alt="checksheet"/> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">page 1</a></li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> </ul> </nav> </header> <div id="wrapper"> <div id="wall"> <div id="right"> <h2><u>Interactive</u></h2> <p>aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaa aaa aaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaa aaa aaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaa </p> </div> <div id="left"> <h1><u>Why do we need a CV?</u></h1> <img src="web-pics/despair.jpg" alt="Despair" id="leftimg" /> <p> Believe it or not, some people do not actually have a C.V, They believe that it is too much effort and that it is not worth the time putting one together. Well this could not be further from the truth, Indeed an employer will only look at your C.V briefly, so you may ask yourself what is the point in putting all that information on there if they are not going to read it properly. An employer is looking for something that will catch their eye, then they skim it over a little bit more, they look at your previous experience, and if they are still looking, they will want your contact details. A C.V is the first potential step into employment, Get this right and you may have yourself an Interview. </p> <h2><u>C.V Layout</u></h2> <p> The most important thing about your C.V is not so much the content, but how you have your layout. This is at least to start with, Remember that it needs to catch the eye of the person reading it. Unless you are applying for a role as a graphic designer, do not insert pictures, colours or other funny gimmicks, it needs to catch their eye and look professional. Use the page to your advantage though, The paper is white, the font is black, this can be a dull setting to start off with, why can't you add any colour to it, Think of it like this, you can add as much colour to it and images and other funny captions, but if the content is not as fulfilling as the colours, Then the employer may wish to employ someone who has taken the time to make their C.V Content an easier read, it can be difficult to read a C.V if it has clashing colours. </p> </div> </div> </div> <footer> <br /> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
</footer>
原文：https://stackoverflow.com/questions/27280239
更新时间：2023-12-15 16:12
最满意答案
将它们移动到数组中，对该数组进行排序，然后使用该数组作为目的。
这是我通过Google 找到的解决方案 ：
var maxSpeed = { car: 300, bike: 60, motorbike: 200, airplane: 1000, helicopter: 400, rocket: 8 * 60 * 60 }; var sortable = []; for (var vehicle in maxSpeed) { sortable.push([vehicle, maxSpeed[vehicle]]); } sortable.sort(function(a, b) { return a[1] - b[1]; }); //[["bike", 60], ["motorbike", 200], ["car", 300], //["helicopter", 400], ["airplane", 1000], ["rocket", 28800]]
一旦你有了数组，你可以按照你喜欢的顺序从数组中重构对象，从而完成你所做的工作。 这可以在我所知道的所有浏览器中运行，但它将取决于实现的怪癖，并且可以随时中断。 您不应该假定JavaScript对象中元素的顺序。
Move them to an array, sort that array, and then use that array for your purposes. Here's a solution:
var maxSpeed = { car: 300, bike: 60, motorbike: 200, airplane: 1000, helicopter: 400, rocket: 8 * 60 * 60 }; var sortable = []; for (var vehicle in maxSpeed) { sortable.push([vehicle, maxSpeed[vehicle]]); } sortable.sort(function(a, b) { return a[1] - b[1]; }); //[["bike", 60], ["motorbike", 200], ["car", 300], //["helicopter", 400], ["airplane", 1000], ["rocket", 28800]]
Once you have the array, you could rebuild the object from the array in the order you like, thus achieving exactly what you set out to do. That would work in all the browsers I know of, but it would be dependent on an implementation quirk, and could break at any time. You should never make assumptions about the order of elements in a JavaScript object.
相关问答
更多-
您可以从头开始创建它，如下所示： var myLib = {}; myLib.object1 = {}; // assuming you get this value from your code somewhere var x = "A1"; myLib.object1[x] = {Color: "Blue", height: 50}; 或者，如果所有值都在变量中： var myLib = {}; myLib.object1 = {}; // assuming you get this va ...
-
将它们移动到数组中，对该数组进行排序，然后使用该数组作为目的。 这是我通过Google 找到的解决方案 ： var maxSpeed = { car: 300, bike: 60, motorbike: 200, airplane: 1000, helicopter: 400, rocket: 8 * 60 * 60 }; var sortable = []; for (var vehicle in maxSpeed) { sortable.p ...
-
根据定义， 对象中的键的顺序是未定义的 ，因此您可能无法以未来的方式执行此操作。 相反，当对象实际显示给用户时，您应该考虑排序这些键。 无论其内部使用的排序顺序并不重要。 按照惯例，大多数浏览器将按照添加的顺序保留对象中的键的顺序。 所以，你可以做到这一点，但不要指望它总是奏效： function sortObject(o) { var sorted = {}, key, a = []; for (key in o) { if (o.hasOwnProperty(k ...
-
正如RyanZim在评论中提到的那样，没有真正的目的来排序对象的属性。 JavaScript不保证属性顺序，因此您不应该依赖它们。 但是，您可以创建一个属性数组，并根据对象中的值对它们进行排序。 const arr = [ { "Accept Credit Cards":"17", "Take-Out":"17", "Alcohol":"16", "Caters":"10", "Takes Reservations":"1 ...
-
基于值的JavaScript排序对象数组（条件排序）(JavaScript sort array of object based on the value (conditional sorting))[2023-07-23]
这是一个简洁的版本。 通过使用|| ，只要上面的表达式评估为0，它就会继续测试下一个较低的表达式： const arr=[{"category_id":101,"category_name":"abc","state":null},{"category_id":204,"category_name":"test","state":null},{"category_id":7,"category_name":"pqr","state":"1526985908122"},{"category_id":103," ... -
var objB = objA不会创建对象的副本。 它包含对objA的引用。 通过引用修改对象会为包含对该对象的引用的两个变量更改它。 要克隆Object，可以使用JSON.parse(JSON.stringify(obj)) 。 var objA = Object.create({ foo: 'foo' }); var objB = JSON.parse(JSON.stringify(objA)); objB.foo = 'bar'; console.log(objA.foo); co ...
-
如何根据月份值创建地图，如下所示： //populate a map with keys based on the month var monthMap = new Object(); for (var i = 0; i < data.length; i++) { if (monthMap[data[i]['month']] == null) { monthMap[data[i]['month']] = data[i]; } else { monthMap[d ...
-
result是一个包含一个对象的数组。 用这个： result[0].username result is an array with one object in it. Use this: result[0].username
-
虽然Chrome在使用数字作为对象索引时可能会保证属性顺序，但ECMA规范并没有说它应该这样做，所以保证我不会依赖这种行为。 我建议你在你想保持数据顺序时重构你的数据来使用数组。 Although Chrome may guarantee property order when using numbers as indexes in objects, the ECMA specification does not say it should do that, so by guarantee I'd not ...
-
Javascript对象在模块化方法中排序和添加新属性(Javascript Object Sorting and Adding new property in Modular Approach)[2022-07-25]
也许使用像这样的减少 var create_map = function(mData, colors, indexes) { return mData.reduce( function(res, curr) { var i = indexes[curr.Bit] || 0; curr.color = colors[i]; ( res[i] = res[i] || [] ).push(curr); return res; },[]); ...