CSS：如何直接对齐图像而不切入底部？

发布于 2025-02-12 14:14:57 字数 733 浏览 4 评论 0原文

我在尝试正确对齐布局时遇到了困难。在这里，我有一个博客文章模板，我想使文本围绕正确对齐的图像正确对齐。

这是我的代码进行的方式（此示例我删除了很多代码，我将用于简洁）：

html（此代码使用一些bootstrap类）

 <div>
   <img src="ubuntu.png" style="float: right;">
   <p>Image caption</p>
 </div>
 <p>Some lovely blog post text.</p>
 <hr/>

，但是如果＆lt的行数量; p＆gt;文本不会使整体文本高于嵌入式图像，图像将通过与水平线“冲突”来打破布局（没有正常的携带，例如float：右零件被删除）。

因此看起来像下面的图像。在那里，图像切入了博客的底部。但是，如果float属性被删除，则不会切入其中，但不会正确对齐。

我不是CSS Pro。在这种情况下，如何对齐是什么正确的方法？

原文

I'm having difficulty while trying to align my layout properly. Here I have a blog post template, and I want to make the text flow around an image aligned to the right properly.

Here's how my code goes (I've cut a lot of code unnecessary for this example and I'll use inline styles for brevity):

HTML (this code uses some Bootstrap classes)

 <div>
   <img src="ubuntu.png" style="float: right;">
   <p>Image caption</p>
 </div>
 <p>Some lovely blog post text.</p>
 <hr/>

But if the number of lines of the <p> text doesn't make the overall text higher than the embedded image, the image will break the layout by "conflicting" with the horizontal line (no normal carrying over happens, like when the float: right part is removed).

So it looks like the image below. There, the image cuts into the bottom part of the blog. But if the float attribute is removed, it doesn't cut into it, but doesn't get aligned right.

I'm not a CSS pro. What is a proper way to do the alignment in this case?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我很坚强 2025-02-19 14:14:57

您需要清除浮子。

.clearfix:after {
  content:"";
  display:block;
  clear:both;
}

将该类添加到＆lt; img＆gt;

示例的contrate div中：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.square {
  width: 100px;
  height: 100px;
  background: yellow;
}

before
<div class="square"></div>
after
<hr> before
<div class="clearfix">
  <div class="square" style="float:right"></div>
</div>

after
<hr> before
<div class="square" style="float:right"></div>
after
<hr>

You need to clear the float.

.clearfix:after {
  content:"";
  display:block;
  clear:both;
}

add that class to a containing div for the <img>

Example:

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.square {
  width: 100px;
  height: 100px;
  background: yellow;
}

before
<div class="square"></div>
after
<hr> before
<div class="clearfix">
  <div class="square" style="float:right"></div>
</div>

after
<hr> before
<div class="square" style="float:right"></div>
after
<hr>

回复收藏 0 原文

~没有更多了~