gpt4 book ai didi

html - 未对齐的 div

转载 作者:太空宇宙 更新时间:2023-11-03 21:36:41 25 4
gpt4 key购买 nike

当浏览器窗口放大以适合列表 2 的 div 时,下面的 div 列表不会水平对齐。我不知道为什么。如果我在所有 div 的段落中使用相同的文本,那么它就会对齐。我在 Fedora 20 中使用 Firefox 32.0。

<!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

最佳答案

使用这段代码:

<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/

关于html - 未对齐的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26017685/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com