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

1

更新: borders のためbox-sizing:border-box、スタイルに適用するか、境界線を含む div をもう 1 つの 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%; }

更新されたフィドルを参照してください

于 2013-05-21T19:12:31.877 に答える
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 に答える