33% между пробелами между пробелами. Можно ли сконденсировать мой код?

Question

Пространство вещей в CSS одинаково просто. Есть также много вопросов о переполнении стека, относящихся к нему, но одна вещь, которую он не объясняет, заключается в том, как помещать пробелы (или margin-left margin-right) между каждым полем.

Чтобы проиллюстрировать это то, что я хотел бы выполнить:

Я чувствую, что я беру длинный маршрут, используя три по-разному с именем дивы, чтобы это произошло:

CSS:

#moreinfobar 
{ 

} 
#moreinfobarbox 
{ 
float:left; 
width:33.33%; 
} 
#moreinfobarbox-info 
{ 
margin:0 20px; 
background-color:#ffffff; 
-webkit-box-shadow: 0px 0px 5px 1px #000000; 
box-shadow: 0px 0px 5px 1px #000000; 
} 

HTML:

<div id="moreinfobar"> 

       <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test1</div></div> 
       <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test2</div></div> 
       <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test3</div></div> 


      </div> 

Я попытался заставить его работать с двумя отдельными разделителями имен безрезультатно. Можно ли сконденсировать мой код?

JSFIDDLE:

Три дивы (работы):

http://jsfiddle.net/JsA25/

Две дивы (прерывистая):

http://jsfiddle.net/TxT4T/1/

Answer 1

Лучше всего я чувствую себя просто установить разницу до 5% , Вот jsfiddle: http://jsfiddle.net/dwbed/

Answer 2

Когда вы даете отступа + ширина любой дочерний элемент, когда его родитель имеет фиксированную ширину. Маржа создает пространство для элемента - результат: сломанный интерфейс.

<div style="width:400px;"> 
    <div style="width:200px; float: left; margin: 0 0 0 20px;">One</div> <!--Total space required: 220px; [disturbed UI]--> 
    <div style="width:200px; float: left; margin: 0 0 0 20px;">Two</div> <!--Total space required: 220px; [disturbed UI]--> 
</div> 

Родитель имеет - 400px;

Детские элементы являются нарушением на 40px - 440px; результат: сломанный UI

Вам просто нужно уменьшить ширину. В вашем случае держать width:26.33%;

Answer 3

Дело здесь в том, что сумма ширин больше, что общая ширина элемента, содержащего (3 х 33,33%) + (3 х 20 пикселей) всегда будет больше 100%!

Вы можете сделать что-то вроде этого, вместо:

.moreinfobarbox 
{ 
float:left; 
width:30.33%; 
margin-left:1.5%; 
margin-right:1.5%; 
} 

Существует хорошие объяснения проблемы в этой статье: How to distribute elements horizontally using CSS