2

我想将一个与浮动到右侧<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>

4

3 回答 3

1

默认情况下， anh2是一个块元素，这意味着它将从其容器中获取所有可用的水平空间。因此， usingtext-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>

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

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

于 2017-07-12T20:27:26.793 回答
0

为了使文本对齐起作用，您必须为内容和<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>

于 2017-07-12T21:18:26.243 回答
0

将图像放在标题之前，并将标题左对齐。不确定这是否真的是你想要的，但请检查这个 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>

于 2017-07-12T20:41:31.843 回答