我想在右边框用 img 装饰文本， 这是我的代码
<img width="276" height="183" style="float:right; margin: 0em 0em 0.5em 0em;" src="myimg.jpg">
</img>
<div style="overflow:auto; widt:300em; margin:0em 0em 0.5em 0em;">
<h3>MyTitle</h3>
<p>MyText</p>
<p>MyText2</p>
<p>MyText3</p>
</div>
img 按预期出现在右边框。唉，div 超出了 img，但在左边界处是预期的。 怎么了？我应该在 div 中像在 img 中一样在自己的声明中使用 widt 属性吗？ 从img开始是否正确？我是这么认为的，因为浮动属性是第一位的，HTML 编译器以有意义的顺序获取这些属性。 html
【问题讨论】：
标签： css image css-float overflow auto
您的代码是正确的，div 的行为是正确的。
但是div 没有出现在图像之外，而是出现在图像的左侧。
对你来说，这似乎超出了，因为你给了divan extremly witdh（超过 4000 像素）。解释：如果一个元素的宽度大于空间，它会跳到浮动元素之外的下一个“行/空间”。
我准备了代码，以便您了解它是如何工作的。只需从浏览器窗口更改 with ，您就可以看到 div 在左侧的位置以及它何时/如何跳到下方。
如果从图像开始无法回答准备好的信息。这取决于您要如何布局元素组。
<img width="276" height="183" style="float:right; margin: 0em 0em 0.5em 0em;" src="https://dummyimage.com/200x200/000/fff">
<div style="overflow:auto; width:350px; margin:0em 0em 0.5em 0em; border: 1px dotted red">
<h3>MyTitle</h3>
<p><b>Make example full width to see how the div is place at the right side of the image.</b></p>
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
<p>Li Europan lingues es membres del sam familie.
Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular.</p>
</div>【讨论】：
350px 只是演示其工作原理的示例。您需要根据布局中的需要调整这些值。但是请考虑一下：如果您有一个未装箱的元素/部分，则（需要的）宽度会随着浏览器窗口的宽度而变化。如果您使用不同的设备（例如台式机/平板电脑/移动设备）也是如此。如果您想使该静态化，您可以将代码包装到包装器 div 并建议包装器的固定宽度。因此，您可以计算 div 和图像所需的宽度，以便它们彼此始终处于静态状态。