верстка блоками

etens1212 · 5 ноя 2015

Здравствуйте, помогите с версткой 3 блоков
мне нужно сделать 3 блока
одинаковой ширтны
но чтобы 4 блок начинался с новой строки
как это правильно сделать?

вот так

они как бы должны по центру быть

я пробовал сделать
но при% ширине + отступления, оно выглядит каряво

iga · 6 ноя 2015

Нужно размеры правильно высчитать и всё встанет на свои места.
На сколько я понял, вам вот так надо:
Спойлер
HTML:
.center {
    margin: 0 auto;
    background-color: #ccc;
    width:53%;
    display: block;
}
.sblock {
    height:60px;
    width:20.4em;
    background-color: #eee;
    margin: 0.4em;
    float:left;
}
.clear {
    clear: both;
}
.main_block {
    background-color: #eee;
    margin: 0.4em;
    height:200px;
}

<div class="center">
    <div class="sblock"></div>
    <div class="sblock"></div>
    <div class="sblock"></div>
    <div class="clear"></div>
    <div class="main_block"></div>
</div>
Код не самый валидный, но я старался показать магию цифр.

Marrie · 10 ноя 2015

Код:


.top{
    margin: 0 auto; 
    width:100%; 
}
.block {
    height:60px;
    width:33%;
    
    float:left;
} 
.main_block {
 clear:both;
    margin:10px auto; 
    width:100%; 
}

<div class="top">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div></div> 
    <div class="main_block"></div>

верстка блоками

etens1212

iga

Marrie