Html 如何使用浮动而不是绝对定位将多个 Div 堆叠在一起？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8981383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I have multiple Divs stack on top of each other using Float and not absolute positioning?
提问by Roozbeh15
I'm rewriting everything and moving away from absolute positions and instead using floats to position things the way I want them.
我正在重写所有内容并远离绝对位置，而是使用浮动来按照我想要的方式定位事物。
The question now is how can I float multiple divs on top of each other? The user will be able to switch between these divs somehow.
现在的问题是如何将多个 div 浮动在一起？用户将能够以某种方式在这些 div 之间切换。
Thanks
谢谢
Edit: The reason I'm moving away from absolute position is that I want my div to still be a child of its parent. i.e. if my div gets extended I want the parent div to get extended also.
编辑：我远离绝对位置的原因是我希望我的 div 仍然是其父级的子级。即如果我的 div 得到扩展，我希望父 div 也得到扩展。
回答by jfriend00
float does not overlap with other floated objects in the same container. See herefor an example of three successive floated objects to see how they don't overlap.
浮动不与同一容器中的其他浮动对象重叠。有关三个连续浮动对象的示例，请参见此处，了解它们如何不重叠。
If you want objects to overlap, you will want/need to use absolute positioning. You can use positioning relative to the parent object by setting the parent to position:relative;and the child to position: absolute;. See herefor an example of overlaping objects with absolute positioning relative to the parent.
如果您希望对象重叠，您将需要/需要使用绝对定位。你可以通过设置父使用相对父对象定位position:relative;和孩子position: absolute;。有关相对于父对象具有绝对定位的重叠对象的示例，请参见此处。
If, you're trying to only have one of these objects actually display at a time, then just set the non-displayed objects to display: noneand they will take no space in the page layout. You won't need to use float or absolute positioning.
如果您尝试一次只实际显示这些对象中的一个，则只需将未显示的对象设置为display: none，它们将不会占用页面布局中的空间。您不需要使用浮动或绝对定位。
回答by mowwwalker
I'm inexperienced in CSS selectors, but I'm sure you can find something that works better than naming each class specifically:
我对 CSS 选择器缺乏经验，但我相信您可以找到比具体命名每个类更有效的方法：
HTML:
HTML：
<div class="over1"></div>
<div class="over2"></div>
<div class="over3"></div>
CSS:
CSS：
div{
height:50px;
width:150px;
float:left;
}
.over1{
background-color:blue;
}
.over2{
margin-top:10px;
margin-left:-10px;
background-color:green;
}
.over3{
margin-top:20px;
margin-left:-10px;
background-color:orange;
}
回答by dave
I don't see how you are going to have users switch between the DIVs without using JavaScript.
我不知道您将如何让用户在不使用 JavaScript 的情况下在 DIV 之间切换。
Perhaps, leave the first div with the default static layout and display none for the others. Use JavaScript to show only one div at a time.
也许，将第一个 div 保留为默认的静态布局，而不为其他 div 显示任何内容。使用 JavaScript 一次只显示一个 div。
回答by Niet the Dark Absol
You can use float: left;, but personally I find it easier to use display: inline-block;instead.
您可以使用float: left;，但我个人觉得使用它更容易display: inline-block;。
