Question

我似乎无法正确地漂浮DIV。我想要实现的是能够将4个DIV放在彼此旁边。每个在0px处与顶部对齐，并且间隔30个左右的像素，但我不能使用绝对定位。 DIV的大小根据屏幕大小进行调整。所以，我需要相对定位DIV。当我试图漂浮DIV时，他们只是坐在彼此顶上。

这是我到目前为止所拥有的。

<head>
<style type="text/css">
.b1{
 position:relative;
 margin-left:50px;
 float:left;
 width:1000px;
 height:200px;
 background-color:#000;
}
.b4{
 position:relative;
 top:0px;
 left:30px;
 float:right;
 width:1000px;
 height:200px;
 background-color:#000;
}
</style>
</head>

<body>
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</body>

Answer 1

当容器的宽度不足以使它们水平对齐时，浮动元素将堆叠。将四个div放在一个足够宽的容器中，以便适合所有容器（大概是4000px +你想要的任何边距和填充）。在你的问题中，你提到30px，但你的例子使用了50px左边距。这是一个左边距为50px的示例。 http://jsfiddle.net/brianflanagan/9ZUw5/

Answer 2

问题是你的视口。浮动一系列元素时，如果视口宽度不足以在一行上显示它们，它们将换行到下一行。要查看我的意思，请将.b1的宽度减小到100。

如果你真的想要一个可以水平滚动的容器div，你可以添加容器div。

＆lt; div class =“container”＆gt; ＆lt; div class =“b1”＆gt;＆lt; / div＆gt;＆lt; div class =“b1”＆gt;＆lt; / div＆gt;＆lt; div class =“b1”＆gt;＆lt; / div＆gt;＆lt; div class = “B4” ＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

父容器样式为：

overflow: scroll;

Answer 3

添加一个包装器并使包装器足够大以适合您的DIV：

<div class="wrapper">
   <div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"</div>
</div>


.wrapper {
    width:3500px;
}

如何将DIV彼此相邻，每个宽度为1000px？

3 个答案: