div column layout

Question

Привет, я пытаюсь создать следующую структуру в div, но мне просто нужна помощь, начинающая с css.

Ширина должна быть 100%

Answer 1

<style type="text/css"> 
.clear{ clear: both; } 
.top{ width: 100%; } 
.col{ width: 25%; float: left; } 
.col, .top{ text-align: center; } 
</style> 
<div class="main"> 
    <div class="top clear">Menu</div> 
    <div class="col">Column1</div> 
    <div class="col">Column2</div> 
    <div class="col">Column3</div> 
    <div class="col">Column4</div> 
    <div class="clear"></div> 
</div> 

Это не будет работать, если добавить границ/отступы/маржу для столбцов, значения ширины использования Абсолит если вы хотите использовать.

Answer 2

Если вы хотите, чтобы четыре плавающих столбца заполнили 100% ширину любого элемента, вы можете увидеть небольшое несоосность в конце последнего столбца в разных браузерах. Легче получить точный выравнивание (скажем, с границами), если вы работаете с шириной контейнера. Например, чтобы воспроизвести визуальное (в комплекте с границами) с помощью CSS:

#container { 
    width: 400px; 
    text-align: center; 
    } 
    #menu {border: 1px solid black;} 
    #cols div { 
    float:left; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    width:99px; 
    } 
    #cols div:first-child { 
    border-left: 1px solid black; 
    width:98px; 

С HTML:

<div id="container"> 
    <div id="menu">Menu</div> 
    <div id="cols"> 
     <div>column 1</div> 
     <div>column 2</div> 
     <div>column 3</div> 
     <div>column 4</div> 
    </div> 
    </div> 

И (как предполагает Lekensteyn) убедитесь, что любой верхний или нижний элемент после столбцов Div имеет правило clear.

Answer 3

Вы можете проверить этот пример здесь:

http://cssdesk.com/