Question

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

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

我还可以将margin-right添加到<h2>代码中，但我发现它并不是非常敏感...

这就是我的意思：

这是我的代码：

＆＃13;

.right {
  float: right;
}

.right h2 {
  text-align: right;
}

.right img {
  float: left;
  width: 100px;
  height: 120px;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.right {
    float: right;
}

.right h2 {
    background: cyan;
    text-align: right;
}

.right img {
    background: red;
    float: left;
    width: 100px;
    height: 120px;
}

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

.right {
    float: right;
}

.right h2 {
    background: cyan;
    display: inline-block;
}

.right img {
    float: left;
    background: red;
    width: 100px;
    height: 120px;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将图像放在标题之前，并将标题对齐到左侧。不确定这是不是你想要的，但请查看这个jsfiddle：

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

HTML

panel-collapse

.right {
  float: right;
}

.right h2 {
  text-align: left;
}

.right img {
  float: left;
}

Answer 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>

CSS浮动图像<img/>没有超过标题<h2>

3 个答案: