主页 / coding / 问题 / 79432215
Accepted
Denis Kulagin
Asked: 2025-02-12 15:03:52 +0800 CST

如何在浮动带有文本的图像时防止出现额外的底部边距

  • 772

我有一个由图像和环绕文本组成的块：

* * * T T T
* * * T T T
* * * T T T
T T T T T T

H H H

其中*代表图像，T代表文本，H是跟在文本/图像块后面的标题。

我需要满足以下两个条件的 CSS 规则：

  1. 文本应该浮动在图像周围，而图像本身具有右侧和底部填充，以防止文本粘附在其上。
  2. 文本/图像块不应该有额外的底部边距或填充，或者至少有一个可折叠的，以便 H 和文本/图像块之间的间距仅由 H 的顶部边距控制。
  3. 当文本足够多以至于超出图片高度时，这种方法很有效。但是，当文本不够多时，我无法解决这个问题：
* * * T T T
* * * T T T
* * * T T T
* * *  
* * *  
    
H H H

在这种情况下，图像的边距不会折叠，而是添加到 H 的顶部边距，从而产生不必要的额外空间。

我怎样才能实现期望的行为？

以下是一个演示该问题的示例：

.container {
  max-width: 600px;
  margin-bottom: 30px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 150px;
  height: auto;
}

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

.header {
  margin-top: 30px;
}
<div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it.

  </p>
</div>

<h3 class="header">Header</h3>

html

3 个回答

  1. 由于您使用伪元素来清除浮动，因此您可以使用它来添加负边距。您还必须向p（或容器上的任何最后一个元素）添加相同的边距

    .container {
  max-width: 600px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px; /* here */
  width: 110px;
}

.container::after {
  content: "";
  display: block;
  clear: both;
  margin-bottom: -15px; /* here */
}

.container > :last-child {
  margin-bottom: 15px; /* here */
}

.header {
  margin-top: 30px; /* header margin */
}

p {
  margin: 0; /* remove default p margin */
}
    <div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it.

  </p>
</div>

<h3 class="header">Header</h3>

    • 1
  2. Best Answer

    将容器边距从 更改为margin-bottom: 30px可以margin-bottom: -15px帮助实现这一点。

    图像的下边距和 的下边距p确保容器底部始终有 15px 的间距，无论我们处于哪种情况。段落（1em，16px具有默认字体大小）的下边距来自用户代理样式表。如果不必依赖它，或者在内容可能是段落以外的其他内容的情况下拥有适当的下边距，您可以将其应用于margin-bottom: 15px容器的最后一个子项。

    容器底部的间距由margin-bottom: -15px容器本身的间距进行补偿。

    .container {
  max-width: 600px;
  margin-bottom: -15px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}

.container > :last-child {
  margin-bottom: 15px;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 150px;
  height: auto;
}

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

.header {
  margin-top: 30px;
}
    <div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it.
  </p>
</div>

<h3 class="header">Header</h3>

<div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it.
    </p>
</div>

<h3 class="header">Header</h3>

    • 1

  3. 我已经删除了所有元素的默认边距和填充，并且还删除了容器的边距底部。

    由于图像已经有缓冲边距，所以我认为它应该可以工作。

    * {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}


.float-image {
  float: left;
  margin: 0 15px 15px 0;
  width: 150px;
  height: auto;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}
    <div class="container">
  <p>
    <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
    This is an example of an image floated to the left with text wrapping around it.
  </p>
</div>

<h3 class="header">Header</h3>

    • -2

相关问题