Misaligned divs

Ниже список divs не выравнивается по горизонтали, когда окно браузера увеличено, чтобы соответствовать в списке 2 divs горизонтально. Я не могу понять, почему. Если я использую один и тот же текст во всех абзацах div, он выравнивается. Я использую Firefox 32.0 в Fedora 20.Misaligned divs

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style> 
    .item_div {display: inline-block; border: 1px solid grey; width: 450px; height: 230px; padding: 5px; margin: 5px;} 
    .item_div img {float:left; margin: 0 10px 0 0; width: 220; height: 220; border: 1px solid grey;} 
    .item_div p {margin: 0;} 
</style> 
</head> 
<body> 
    <div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>irure ullamco in adipisicing in laborum enim exercitation voluptate quis ex sint id ut tempor amet, reprehenderit commodo qui aute</p> 
    </div> 
    <div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>quis occaecat commodo reprehenderit in do non sed dolor aliqua. deserunt amet, sunt eiusmod officia cupidatat ipsum veniam, Excepteur dolore</p> 
    </div> 
     <div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>Lorem ea aute minim in velit adipisicing aliquip enim eiusmod pariatur. in nostrud qui voluptate tempor ullamco non in dolor</p> 
    </div> 
    <div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>dolore ut aliquip consequat. cupidatat cillum dolor quis proident, amet, dolore nulla minim culpa ad incididunt nisi aliqua. eiusmod officia</p> 
    </div> 
</body> 
</html>

misaligned divs

источник

2014-09-24 Clodoaldo Neto

попробуй put float: left; на .item_div –

использовать этот код:

<div id="main"> 
    <div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>irure ullamco in adipisicing in laborum enim exercitation voluptate quis ex sint id ut tempor amet, reprehenderit commodo qui aute</p> 
    </div><!-- 
    --><div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>quis occaecat commodo reprehenderit in do non sed dolor aliqua. deserunt amet, sunt eiusmod officia cupidatat ipsum veniam, Excepteur dolore</p> 
    </div><!-- 
     --><div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>Lorem ea aute minim in velit adipisicing aliquip enim eiusmod pariatur. in nostrud qui voluptate tempor ullamco non in dolor</p> 
    </div><!-- 
    --><div class="item_div"> 
     <a> 
     <img width="220" height="220"> 
     </a> 
     <p>dolore ut aliquip consequat. cupidatat cillum dolor quis proident, amet, dolore nulla minim culpa ad incididunt nisi aliqua. eiusmod officia</p> 
    </div> 
     </div>

И это CSS:

.item_div {display: block; float:left; border: 1px solid grey; width: 450px; height: 230px; padding: 5px; margin: 5px;} 
    .item_div img {float:left; margin: 0 10px 0 0; width: 220; height: 220; border: 1px solid grey;} 
    .item_div p {margin: 0;} 

#main:after { clear:both; content: ""; display:block; }

FIDDLE: http://jsfiddle.net/mceohpkn/

источник

2014-09-24 13:09:41 mehulmpt

Misaligned divs

ответ

Смежные вопросы