Question

当浏览器窗口被放大以适应列表2 divs时，下面的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

Answer 1

使用此代码：

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

未对齐的div

1 个答案: