尝试在同一行上以均匀间距获取多个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;
}
答案 0 :(得分:5)
我建议在每个serviceBox中添加一个新元素,在本例中div
使用类框
<强> 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>
这样,服务盒很容易就是容器和内部服务盒的四分之一,你可以将边框和阴影添加到新的框元素
答案 1 :(得分:1)
更新:由于边框,要么将box-sizing:border-box
应用于您的样式,要么将带有边框的div放在另外一个div中。
至少有4种不同的方法。
使用浮动布局
使用display:table-cell
使用display:inline-block
使用绝对定位
.serviceBox {
box-sizing:border-box;
margin-right:4%;
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:first { margin-left:4%; }
请参阅更新的fiddle
答案 2 :(得分:0)
你的问题是这些方框有一个边框,所以给它们width
和margin
的百分比总和为100%不起作用:每个方框的边框都有2个像素,将最后一个推离排。但是你可以通过给它们带来负边距来弥补这个问题:
width:25%;
margins:0 -1px;
答案 3 :(得分:0)
试试这个,
.serviceBox {
margin-left:4%;
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;
}