Центрировать четыре столбца в CSS - PullRequest
Новая
       27

Центрировать четыре столбца в CSS

0 голосов
/ 13 мая 2010

Я пытаюсь сделать четыре столбца по центру главной страницы. Мне бы хотелось, чтобы это выглядело так:
http://www.clutterpad.com/

Мой код выглядит так: 

#bottom-container {width:100%;height:250px;position:relative;}
#bottom-mid {background-color:white;}
#bottom-left, #bottom-mid, #bottom-right {height:250px;}
#bottom-left, #bottom-right {width:50%;float:left;}

#bottom-left {background-color:white;position:absolute;top:0px;left:0px;}
#bottom-right {background-color:white;position:absolute;top:0px;left:50%;}

#bottom-mid {position:relative;margin:0px auto; width:1000px;z-index:2;}
#column-container {width:100%; margin:20px auto;}
.column {width:200px;float:left;font-size:10pt;font-family:Arial;margin:20px 10px;}

Но это не работает. Как мне написать код, чтобы он выглядел как пример, который я упоминал ранее?

Ответы [ 2 ]

3 голосов
/ 13 мая 2010

Было бы хорошо, если бы вы включили HTML, но я бы подошел к этой проблеме так: 

<div id="fourcolumns">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

CSS: 

#fourcolumns {
    width: 100%;
    overflow: hidden;
}

#fourcolumns div {
    width: 25%;
    float: left;
}

Если вы добавляете поля между столбцами, вы станете жертвой ошибки с плавающей запятой в IE6, которую вы можете исправить, добавив #fourcolumns div { display: inline; }

0 голосов
/ 13 мая 2010 
<div id="fourcolumns"> 
    <div>Column</div> 
    <div>Column</div> 
    <div>Column</div> 
    <div>Column</div> 
</div>

CSS: 

#fourcolumns { 
    margin: 0 auto;
    width: 50%; 
    overflow: hidden; 
} 

#fourcolumns div { 
    width: 25%; 
    float: left; 
}
...