0

试图在同一行上以均匀的间距获得多个 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;
}

https://jsfiddle.net/ruJ2R/3/

4

4 回答 4

11

我建议在每个 serviceBox 中添加一个新元素，在本例中为divwith class 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>

这样，服务框很好地占据了容器的四分之一，并且在服务框内部，您可以将边框和阴影添加到新的框元素

于 2013-05-21T19:25:07.550 回答
1

更新：由于边框，要么适用box-sizing:border-box于您的样式，要么将带边框的 div 放在另一个 div 中。

至少有 4 种不同的方法可以做到这一点。

  • 使用浮动布局

  • 使用显示：表格单元格

  • 使用 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%; }

查看更新的小提琴

于 2013-05-21T19:12:31.877 回答
0

你的问题是盒子有一个边框，所以给它们width加上margin总和为 100% 的百分比是行不通的：每个盒子都有一个额外的 2 像素从边界，将最后一个从行中推开。但是你可以通过给它们负边距来补偿边界来解决这个问题：

width:25%;
margins:0 -1px;
于 2013-05-21T19:16:53.227 回答
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;

}

于 2013-05-21T19:36:04.490 回答