CSS 浮动图像 <img> 不超过标题 <h2>答案

【问题标题】：CSS floated image <img> not going over title <h2>CSS 浮动图像 <img> 不超过标题 <h2>
【发布时间】：2017-12-17 10:01:29
【问题描述】：

我想将<h2> 与浮动到右侧的<p> 标记对齐。

虽然我可以使用text-align 使<h2> 向右移动，但<p> 的开头和<h2> 标记之间存在间隙。

我也可以将margin-right 添加到<h2> 标记中，但我发现这不是很敏感...

这就是我的意思：

这是我的代码：

.right {
  float: right;
}

.right h2 {
  text-align: right;
}

.right img {
  float: left;
  width: 100px;
  height: 120px;
}

<div class="block right">
  <h2>Header 2.1</h2>

  <img src="images/wip.png" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

【问题讨论】：

有人解决了您的问题吗？如果是这样，您能否接受最佳答案（单击点下的复选标记）。这将帮助遇到您的问题的其他用户快速发现接受的答案，并且还提供 15 个代表。指向作者（：

标签： html css alignment css-float right-align

【解决方案1】：

默认情况下，h2 是block element，这意味着它将占用其容器中所有可用的水平空间。因此，使用text-align: right 只会移动其中的文本，但它会占用相同的空间，如您在此处看到的：

.right {
    float: right;
}

.right h2 {
    background: cyan;
    text-align: right;
}

.right img {
    background: red;
    float: left;
    width: 100px;
    height: 120px;
}

<div class="block right">
    <h2>Header 2.1</h2>

    <img src="images/wip.png" />
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

删除text-align 属性并将display: inline-block 添加到h2。注意display: inline 也可以，但不会应用（垂直）边距和填充。

这将允许浮动图像推送h2 元素，以便将自身定位在容器的开头：

.right {
    float: right;
}

.right h2 {
    background: cyan;
    display: inline-block;
}

.right img {
    float: left;
    background: red;
    width: 100px;
    height: 120px;
}

<div class="block right">
    <h2>Header 2.1</h2>

    <img src="images/wip.png" />
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

另一种选择是将 HTML 中的 img 移动为第一个元素：

.right {
    float: right;
}

.right h2 {
    background: cyan;
}

.right img {
    float: left;
    background: red;
    width: 100px;
    height: 120px;
}

<div class="block right">
    <img src="images/wip.png" />

    <h2>Header 2.1</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

【讨论】：

我们正在取得进展！该解决方案在我迄今为止尝试过的所有方法中效果最好。然而，有一件事有点不受欢迎：图像从 h2 的顶部开始。这就是我将 h2 保留为一个块的原因，因此图像将位于 h2 下方。但也许有不同的方法来处理这个问题。有什么建议吗？
@HeadGam3z 您应该将h2 元素的margin-top 设置为0，或者在所有元素中：h2 { margin-top: 0; }，或者只设置为第一个。假设h2 始终是.block 元素中的第一个元素：.block > h2:first-child { margin-top: 0; }

【解决方案2】：

图片放在标题前，标题左对齐。不确定这是否真的是你想要的，但请检查这个 jsfiddle：

https://jsfiddle.net/lkjimy/y159joe6/

HTML

.right {
  float: right;
}

.right h2 {
  text-align: left;
}

.right img {
  float: left;
}

<div class="block right">

  <img src="http://via.placeholder.com/300x300" />

  <h2>Header 2.1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

【讨论】：

【解决方案3】：

为了使文本对齐起作用，您必须为内容和 <h2> 元素设置一个宽度。

HTML

div.right {
  width: 50%;
  /* example */
}

div.right {
  float: right;
}

div.right h2 {
  width: 100%;
  /* example */
  text-align: right;
}

div.right img {
  float: left;
}

<div class="block right">
  <!-- switch the image to the top of the content -->
  <img src="images/wip.png" />

  <h2>Header 2.1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

【讨论】：