0

Есть 3 блока. Они в другом одном блоке. Но они не выравниваются горизонтально ровно. В чем может быть проблема?

<div>
    <div class="l"></div>
    <div class="c"></div>
    <div class="r"></div>
</div>

.l {margin: 0 auto; float: left; width:33%; height:50px; background: red;}
.c {margin: 0 auto; width:33%; height:50px; background: green;}
.r {margin: 0 auto; float: right; width:33%; height:50px; background: yellow;}

2 ответа 2

1

Блок 'r', идёт за необтикающим блоком 'c' и начинает его с новой строки, можно его поставить до блока 'с', тогда будет, как надо:

http://jsfiddle.net/bfwefwcu/

Ещё можно сделать центральный блок инлайновым (display: inline-block), но тогда его центрировать придется, ставя родительскому элементу значение text-align: center

http://jsfiddle.net/o4p4f3ey/1/

0

Дайте блоку родителя text-align: center;, а дочерним display: inline-block;вместо float везде.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.