Html 如何在一行上有多个 Div 并且间距均匀

How To Have Multiple Divs On One Line With Even Spacing

提问by Kay

Trying to get multiple divs on the same line with even spacing. So they nicely fit the whole container.

试图在同一行上以均匀的间距获得多个 div。所以它们非常适合整个容器。

Here is what i have got so far. Tried to set margin right and left equal to the same on all the boxes, but it is still tricky to make it even and sometimes the final box will go on a new line.

这是我到目前为止所得到的。试图将所有框的左右边距设置为相同，但要使其均匀仍然很棘手，有时最后一个框会换行。

HTML

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

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;
}

http://jsfiddle.net/ruJ2R/3/

http://jsfiddle.net/ruJ2R/3/

回答by Opifexer

I would suggest adding a new element inside each serviceBox, in this example the divwith class box

我建议在每个 serviceBox 中添加一个新元素，在本例中为divwith 类框

CSS:

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

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>

This way the service boxes are nicely a quarter of the container and inside service box you can add the border and shading to the new boxelement

这样，服务框正好是容器的四分之一，在服务框内部，您可以为新的框元素添加边框和阴影

回答by vittore

UPDATE: because of the borders , either apply box-sizing:border-boxto your style, or put your div with borders inside one more div.

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

There are at least 4 different ways of doing it.

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

• using float layout

• using display:table-cell

• using display:inline-block

• using absolute positioning

  .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%; }
  

• 使用浮动布局

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

see updated fiddle

查看更新的小提琴

回答by ASGM

Your problem is that the boxes have a border, so giving them widthand marginin percentages that sum to 100% don't work: each box has an extra 2 pixels from the border, pushing the last one off the row. But you can solve this problem by giving them negative margins to compensate for the border:

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

width:25%;
margins:0 -1px;

回答by shammelburg

try this,

尝试这个，

.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;

}

}