2013-05-05 3 views
0

Я ищу, чтобы создать что-то подобное изображение, показанное:Space Divs по горизонтали и по вертикали в центрированной оберткой

enter image description here

мне удалось получить #wrap по центру по горизонтали, но это о нем .. любая помощь была бы высоко оценена.

<style> 
    #wrap 
    { 
    Margin-left:auto; 
    Margin-right:auto; 
    padding: 10px; 
    } 

    #content 
    { 
    padding: 10px; 
    } 
</style> 

~~~

<body> 
    <div id="wrap"> 

     <div id="content"> 
     1 
     </div> 
     <div id="content"> 
     2 
     </div> 
     <div id="content"> 
     3 
     </div> 

    </div> <!--end wrap--> 
</body> 

ответ

0

Поскольку вы работаете с блочными элементами (https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements), необходимо внутреннее elment иметь фиксированную высоту, так что вы можете дать position: absolute. Кроме того, имейте в виду, что идентификатор элемента должен быть уникальным. Если вы хотите использовать элемент mulitple times, назначьте имя class, например.

<div class="content">1</div> 
<div class="content">2</div> 
<div class="content">3</div> 

Таким образом, для всей материи взглянуть на http://jsfiddle.net/YFncP/253/

Надеются, что это помогает.