0

我研究过类似的问题并尝试使用 display:table-cell; 内联块；vertical-align:middle 到处都是，但我不能让它工作。在这个示例 Genesis 主题页面（请看）中，它演示了使用“one-half”和“first”CSS 类的列的使用。使用 DevTools/Inspector，您可以进入并<img src="http://placehold.it/140x240">在段落之前添加，如下所示。也许创世纪专栏中的某些东西使这比应有的更难，或者我更有可能错过了显而易见的事情。

在第一列中，我需要 img 出现在文本的左侧，而文本是垂直对齐的。我似乎无法找到可以做到这一点的组合。注意我确实知道图像的高度 - 它不是动态的。如果更容易，我可以使用跨度而不是 P。

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>
4

1 回答 1

0

这里的关键是宽度的声明。p默认情况下，即使您将其设置为 100% 宽度display，inline-block您也需要使用以下内容进行设置：

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
      This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
  </p>
</div>

注意添加到孩子的类，现在应用了 CSS：

.OneHalfItem {
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}

.OneHalfText {
    width:calc(100% - 140px);
    padding:10px;
}

现在它排列得很好，花花公子，使用calc. 几件事：

  • 这很容易，因为图片是固定宽度；如果img大小是可变的，您还需要声明它的宽度（百分比或其他内容），然后根据该大小计算p大小
  • 我消除了img标签末尾和标签开头之间的空白p，因为默认情况下inline-block会在每个元素的右侧添加 4px 的边距。通过删除标签之间的空白，它消除了空白边距。

请注意，这仅适用于 IE9+（当然还有真正的浏览器），因此如果您需要支持 IE8-，那么您需要通过 JS 进行相同类型的宽度计算，但很容易完成。

这是一个 jsFiddle 来展示它的工作原理。

于 2014-10-14T14:18:49.643 回答