Question

我正在尝试在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>

enter image description here

如何将边框放低一点？

谢谢！

Answer 1

您需要clear当前float：

或者：

<br clear="left" />  <!-- or "right" or "all" -->

或者：

<div style="clear: left;"></div> <!-- or "right" or "both" -->

Answer 2

在.content div中，替换clear：both with overflow：hidden

.content {
                overflow: hidden;
                border-color: #666666;
                border-bottom: 3px solid;
            }

Answer 3

全部使用float:left;：

图片已离开课程
Div。内容应该相同，即;包装div
段落内容

Answer 4

我并不完全明白你想要在这里实现什么，但是如果你想要一个img和p以下的div，那么你可以摆脱{{1在class="left"中并将img应用于float: left类。

content

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

4 个答案: