Html 未对准的div
当浏览器窗口放大到适合列表2水平方向时,下面的div列表不会水平对齐。我不明白为什么。如果我在所有div的段落中使用相同的文本,那么它将对齐。我在Fedora20中使用Firefox32.0Html 未对准的div,html,css,firefox,Html,Css,Firefox,当浏览器窗口放大到适合列表2水平方向时,下面的div列表不会水平对齐。我不明白为什么。如果我在所有div的段落中使用相同的文本,那么它将对齐。我在Fedora20中使用Firefox32.0 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .item_div {display: inline-block; border: 1px solid grey; w
<!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>
.item_div{显示:内联块;边框:1px纯灰色;宽度:450px;高度:230px;填充:5px;边距:5px;}
.item_div img{float:左;边距:0 10px 0;宽度:220;高度:220;边框:1px纯灰;}
.item_div p{边距:0;}
使用以下代码:
<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>
小提琴:使用以下代码:
<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>
小提琴:试着把浮子放在左边;on.item_div尝试放置浮动:左;关于.项目_div