尝试在同一行上以均匀间距获取多个 div。所以它们非常适合整个容器。
这是我到目前为止所得到的。尝试将所有框的左右边距设置为相同,但要使其均匀仍然很棘手,有时最后的框会换行。
HTML
<div id="serviceBox">
<div class="serviceBox1">
<h2> Heading 1</h2>
<p>Information</p>
</div>
<div class="serviceBox2">
<h2>Heading 2</h2>
<p> Information</p>
</div>
<div class="serviceBox3">
<h2>Heading 3</h2>
<p>Information</p>
</div>
<div class="serviceBox4">
<h2>Heading 4</h2>
<p>Information</p>
</div>
</div>
CSS
#serviceBox
{
width:100%;
margin: 0 auto;
margin-top:75px;
height:250px;
border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
float:left;
width:20%;
height: 250px;
background-color: white;
border: 1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
}
最佳答案
我建议在每个 serviceBox 中添加一个新元素,在本例中为 div
类 box
CSS:
#serviceBox
{
width:100%;
margin: 0 auto;
margin-top:75px;
height:250px;
border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
float:left;
width:25%;
}
.box{
height: 250px;
background-color: white;
border:1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
}
HTML
<div id="serviceBox">
<div class="serviceBox1">
<div class="box">
<h2> Heading 1</h2>
<p>Information</p>
</div>
</div>
<div class="serviceBox2">
<div class="box">
<h2>Heading 2</h2>
<p> Information</p>
</div>
</div>
<div class="serviceBox3">
<div class="box">
<h2>Heading 3</h2>
<p>Information</p>
</div>
</div>
<div class="serviceBox4">
<div class="box">
<h2>Heading 4</h2>
<p>Information</p>
</div>
</div>
</div>
这样服务框就很好地占了容器的四分之一,在服务框内部您可以为新的 box 元素添加边框和底纹
关于html - 如何将多个 div 排在一行且间距均匀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16677539/