Html CSS图片和段落与浮动对齐，添加多个条目时布局难看_Html_Css_Vertical Alignment_Alignment

Html CSS图片和段落与浮动对齐，添加多个条目时布局难看

html css

Html CSS图片和段落与浮动对齐，添加多个条目时布局难看,html,css,vertical-alignment,alignment,Html,Css,Vertical Alignment,Alignment,我试着在左边放一张图片，在右边放一段解释，它可能会超过图片的高度所以我提出了一个最小的测试用例： <html> <head> <title> This is an demo </title> <style> img { float: left; } </style> </head> <body>

我试着在左边放一张图片，在右边放一段解释，它可能会超过图片的高度

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

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


这是一个演示
img{float:left；}
这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。

这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。这是一段相当长的段落。。

结果（铬浏览器15）非常糟糕：

第二个

div

与第一个重叠

注：我尝试使用HTML表格，但这不是我想要的，最好在这里纠正我的错误

谢谢

您可以在内容

div

中添加一个clear:two，这样它们就不会相互重叠

#content {
clear:both;
}

此外，如果您多次使用内容，则应使用

类

，而不是

id

。在类和ID上：

在内容div

之间放置一个div，如

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