Как иметь несколько разделов на одной линии с равномерным интервалом

Question

Попытка получить несколько 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; 
} 

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

Answer 1

Я хотел бы предложить добавить новый элемент внутри каждого 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> 

Таким образом, коробки услуг красиво четверть контейнера и внутри коробки обслуживания вы можете добавить границы и затенение нового коробки элемента

Answer 2

UPDATE: из-за границы, либо применить box-sizing:border-box к вашему стилю, или положить DIV с границами внутри еще одной дел.

Существует не менее 4 различных способов сделать это.

• с помощью флоат макета

• используя дисплей: настольный ячейки

• используя дисплей: встроенный блок

• с помощью абсолютного позиционирования

  .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

Answer 3

Ваша проблема заключается в том, что ящики имеют границ, так что дают им width и margin в процентах, что сумма на 100% не работает: каждая коробка имеет дополнительные 2 пикселей от границы, толкая последний из строки. Но вы можете решить эту проблему, предоставляя им отрицательные поля для компенсации границы:

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

Answer 4

попробовать это,

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

}