Question

我正试图在左边放置一张图片，在右侧放置说明段落，可能要长一点才能超过该图像的高度。

所以我推出了一个最小的测试用例：

<html>
    <head>
        <title> This is an demo </title>
        <style>
            img { float: left; }
        </style>
    </head>
    <body>
        <div id="content">
            <img src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph .. 
            </p>
        </div>
        <div id="content">
            <img src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph ..  This is a pretty long paragraph .. This is a pretty long paragraph .. This is a pretty long paragraph .. 
            </p>
        </div>
    </body>
</html>

结果（Chromium Browser 15）非常糟糕：

enter image description here

第二个div与第一个{{1}}重叠。

P.S：我试图使用HTML表格，但这不是我想要的，最好在这里解决我的错误

谢谢！

Answer 1

您可以向内容div添加一个明确的内容：这样他们就不会相互重叠。

#content {
clear:both;
}

此外，如果您多次使用#content，则应使用class而不是id。关于类和ID：http://www.tizag.com/cssT/cssid.php

Answer 2

在内容div <div style="clear:both;"></div>之间放置一个div，如

<div id="content"></div>
<div style="clear:both;"></div>
<div id="content"></div>

添加多个条目时，CSS图片和段落与浮动，丑陋的布局对齐

2 个答案: