如何以 1000px 的宽度将 DIV 彼此相邻对齐？答案

【问题标题】：How can I align DIV's next to each other each with a width of 1000px?如何以 1000px 的宽度将 DIV 彼此相邻对齐？
【发布时间】：2010-10-23 01:27:09
【问题描述】：

我似乎无法正确浮动 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>

【问题讨论】：

4000px 是一种显示分辨率。这是 IMAX 屏幕吗？
哈哈哈，不应该垂直滚动。

标签： html css css-float

【解决方案1】：

问题在于您的视口。当您浮动一系列元素时，如果视口不够宽而无法在一行上显示它们，它们将换行到下一行。要明白我的意思，请将 .b1 的宽度减小到 100。

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

与父容器样式：

overflow: scroll;

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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;
}

【讨论】：