如何将 DIV 彼此相邻对齐，宽度为 1000px？
我似乎无法正确浮动 DIV。我想要实现的是能够将 4 个 DIV 彼此相邻放置。每个对齐到顶部 0 像素，间隔 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>
I can't seem to float DIV's correctly. What i am trying to achieve is being able to position 4 DIV's next to each other. Each aligned to the top at 0px, and spaced apart by 30 or so pixels, but i cannot use absolute positioning. The size of the DIV's are adjusted according to screen size. So, i need to position the DIV's relatively. When i try to float the DIV's they just sit atop each other.
Here is what i have thus far.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
当容器宽度不足以水平对齐元素时，浮动元素将堆叠。将四个 div 放入一个足够宽的容器中（大概是 4000px + 任何您想要的边距和填充）。在您的问题中，您提到 30px，但您的示例使用 50px 左边距。这是一个左边距为 50 像素的示例。 http://jsfiddle.net/brianflanagan/9ZUw5/
Floated the elements will stack when their container isn't wide enough to align them horizontally. Put the four divs inside a container that's wide enough for all of them to fit (presumably 4000px + whatever margin and padding you want on each). In your question, you mention 30px, but your example uses a 50px left margin. Here's an example with a 50px left margin. http://jsfiddle.net/brianflanagan/9ZUw5/
添加一个包装器并使包装器足够大以适合您的 DIV：
Add a wrapper and make the wrapper large enough to fit your DIVs:
问题是你的视口。当您浮动一系列元素时，如果视口不够宽，无法在一行上显示它们，它们将换行到下一行。要明白我的意思，请将 .b1 的宽度减小到 100。
如果您确实希望它可以水平滚动，您可以添加一个容器 div。
父容器样式为：
The problem is your viewport. When you float a series of elements, they will wrap to the next line if the viewport is not wide enough to display them on one line. To see what I mean, decrease the width of .b1 to 100.
You can add a container div if you really want this that can scroll horizontally.
<div class="container">
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</div>
With the parent container style of: