Выравнивание div по горизонтали внутри центрируемого контейнера

Question

Выравнивание div по горизонтали внутри центрируемого контейнера

0

Как я могу выровнять 4 divs в css внутри контейнера, как на этом изображении: http://postimg.org/image/w0k7wgdfb/ Здесь мой html, я думаю, мне нужен еще один контейнер для DIV # 2 и DIV # 3.

<div id="container">
   <div id="header"> DIV 1 </div>
    <div id="wraper"> <!-- WRAPER -->
      <div id="sidebar"> DIV 2 </div>
      <div id="content"> DIV 3 </div>
    </div> <!-- WRAPER -->
   <div id="footer"> DIV4 </div>
</div>

Спасибо за помощь!

Arkenn 08 май 2014, в 18:10

Источник

0

PS Обертка имеет две Ps в нем.
TylerH 08 май 2014, в 15:36

Теги:

html

css

alignment

sidebar

2 ответа

0

Здесь есть рабочая скрипка.
HTML

CSS

 #one{
        width: 400px;
        background: black;
        margin: 0 auto;
        height: 600px;
    }
    #two{
        height: 100px;
        width: 400px;
        background: lime;
    }
    #three{
        height: 400px;
        width: 100px;
        background: yellow;
        float: left;
    }
    #four{
        height: 400px;
        width: 300px;
        background: blue;
        float: left;
    }
    #five{
        height: 100px;
        clear: both;
        width: 400px;
        background: silver;
    }

user3057089 08 май 2014, в 13:39

Ещё вопросы

SW4 · Accepted Answer · 2014-05-08T14-31-00.000Z

Решение 1 - Поплавки

После выравнивания содержимого центра вы можете использовать простой трюк с плавающей точкой для двух средних div:

CSS

html, body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 20px;
    box-sizing:border-box;
}
#container {
    text-align:center;
    width:500px;
    margin: 0 auto;
    height:100%;
    background:black;
    padding:20px;
    box-sizing:border-box;
}
#header {
    background:green;
    height:20%;
}
#wraper {
    height:60%;
    overflow:hidden;
}
#sidebar {
    width:20%;
    float:left;
    height:100%;
    background:red;
}
#content {
    overflow:hidden;
    background:blue;
    height:100%;
}
#footer {
    background:orange;
    height:20%;
}

Решение 2 - Дисплей: Таблица

После выравнивания содержимого по центру вы можете применить макет таблицы к средним divs

CSS

html, body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 20px;
    box-sizing:border-box;
}
#container {
    text-align:center;
    width:500px;
    margin: 0 auto;
    height:100%;
    background:black;
    padding:20px;
    box-sizing:border-box;
}
#header {
    background:green;
    height:20%;
}
#wraper {
    height:60%;
    display:table;
    width:100%;
}
#sidebar {
    width:20%;
    display:table-cell;
    background:red;
}
#content {
    display:table-cell;
    background:blue;
}
#footer {
    background:orange;
    height:20%;
}

Спасибо, SW4, я думаю, что буду придерживаться решения с плавающей точкой. Спасибо, это действительно помогает!