使用伪元素模拟“float: center”

假设您想要创建一个这样的布局

这很合理，对吧？尤其是在您的文章是关于猫咪喜欢成为关注的中心时。明白了吗？！（小猫来自 PlaceKitten）。

但这并不容易实现。我们当前的布局方法并非为此而设计。事实上，有时它们感觉并没有考虑到“网页设计”。我说的对吗？即使是最前沿的 CSS 布局系统，我认为也无法很好地处理这种情况。这有点像 float，因为文本环绕图像，但文本从两个方向环绕，因此它有点像 float: center; 或 float: both;，而它们并不存在。

但这是可行的！证明

查看演示   下载文件

我们将通过使用浮动伪元素占位符来实现它。我们将在每一列文本¹中放置一个，一个浮动到左侧，一个浮动到右侧。伪元素的高度应与图像相同，宽度的一半（或多或少……请记住，您需要一些填充，并且还需要考虑间距）。

本质上

#l:before, #r:before { 
  content: ""; 
  width: 125px; 
  height: 250px; 
}
#l:before { 
  float: right; 
}
#r:before { 
  float: left; 
}

现在文本中出现了一个空洞，可以将我们的图像放置在那里。我们可以通过在那里绝对定位它来实现，就像在演示中一样。或者您也可以将其保留在上面的某个元素中，居中，并使用列上的负顶部边距将文本向上拉。

---

¹ 注意，我们使用 div 作为文本列，而不是 CSS 列，后者会更酷且更具语义化，但它不会发生。