在HTML中，在图像和文本下放置边框，但当图像太大时，边框位于文本下_Html_Css_Alignment

在HTML中，在图像和文本下放置边框，但当图像太大时，边框位于文本下

html css

在HTML中，在图像和文本下放置边框，但当图像太大时，边框位于文本下,html,css,alignment,Html,Css,Alignment,我试图在div标记后放置一个边框，但是在文本周围显示的线条，而不是在左侧图像的下方，我如何修复它 <html> <head> <title> This is an demo </title> <style> .left { float: left; } .content { clear: both;

我试图在div标记后放置一个边框，但是在文本周围显示的线条，而不是在左侧图像的下方，我如何修复它

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { float: left; }
            .content {
                clear: both;
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> This is a not so long paragraph</p>
        </div>
    </body>
</html>


这是一个演示
.left{float:left；}
.内容{
明确：两者皆有；
边框颜色：#666666；
边框底部：3倍实心；
}
这一段不太长

我怎样才能把边界放低一点

谢谢

您需要

清除当前浮动：
要么：
<br clear="left" />  <!-- or "right" or "all" -->



或：
使用浮动：左适用于所有：

图像已离开课堂
分区内容应具有相同的属性，即：；包装部
段落内部内容
在.content div中，将清除：两者替换为溢出：隐藏
.content {
                overflow: hidden;
                border-color: #666666;
                border-bottom: 3px solid;
            }

我不太明白你想在这里实现什么，但是如果你想让一个div的img
和p
在彼此下面，那么你可以在img
中去掉class=“left”
，并将float:left
应用到内容
类中
<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { float: left; }
            .content {
                float: left; /* can get rid of this if you want your div to have the page witdh */
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img src="image.jpg" />
            <p> This is a not so long paragraph</p>
        </div>
    </body>
</html>


这是一个演示
.left{float:left；}
.内容{
float:left；/*如果您想让您的div拥有该页面，可以将其删除*/
边框颜色：#666666；
边框底部：3倍实心；
}
这一段不太长
@Helen这只是一个很小的例子，只是其中的一部分。我个人认为不值得依赖溢出属性的副作用，有时需要与其他属性耦合，以实现简单的清除，只是为了避免添加额外的元素，但文章的作者似乎确实…@DavidHedlund，谢谢！那是一篇有用的文章
<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { float: left; }
            .content {
                float: left; /* can get rid of this if you want your div to have the page witdh */
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img src="image.jpg" />
            <p> This is a not so long paragraph</p>
        </div>
    </body>
</html>