Html 如何对齐DIV'；它彼此相邻，宽度为1000px？_Html_Css_Css Float

Html 如何对齐DIV'；它彼此相邻，宽度为1000px？

html css

Html 如何对齐DIV'；它彼此相邻，宽度为1000px？,html,css,css-float,Html,Css,Css Float,我似乎不能正确地浮动DIV。我想实现的是能够将4个DIV定位在彼此相邻的位置。每个都以0px与顶部对齐，间隔大约30个像素，但我不能使用绝对定位。DIV的大小根据屏幕大小进行调整。所以，我需要定位DIV的相对位置。当我试着让潜水艇浮起来时，它们只是坐在彼此的上面以下是我到目前为止的情况 <head> <style type="text/css"> .b1{ position:relative; margin-left:50px; float:left; widt

我似乎不能正确地浮动DIV。我想实现的是能够将4个DIV定位在彼此相邻的位置。每个都以0px与顶部对齐，间隔大约30个像素，但我不能使用绝对定位。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>


.b1{
位置：相对位置；
左边距：50像素；
浮动：左；
宽度：1000px；
高度：200px；
背景色：#000；
}
.b4{
位置：相对位置；
顶部：0px；
左：30px；
浮动：对；
宽度：1000px；
高度：200px；
背景色：#000；
}

浮动元素将在其容器不够宽，无法水平对齐时堆叠。将四个div放在一个足够宽的容器中，以便所有div都适合（大概是4000px+每个div上需要的任何边距和填充）。在您的问题中，您提到了30px，但您的示例使用了50px的左边距。下面是一个左边距为50px的示例

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

如果您真的需要，可以添加一个可以水平滚动的容器div

父容器样式为：

overflow: scroll;

添加包装并使包装足够大以适合您的div：

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


.wrapper {
    width:3500px;
}


4000px是一个地狱般的显示分辨率。这是IMAX屏幕吗？哈哈哈，不，它应该是垂直滚动的。