仅使用CSS将元素包装在特定元素周围

Question

我正在尝试将元素包装到浮动元素的两侧，而不是仅仅在一侧。例如，我有http://jsfiddle.net/p384K/。我希望元素能够动态地存在于#main的左侧以及右侧。我可以用纯CSS做这个吗？

Answer 1

不幸的是，实现你想做的事并没有简单的方法。它可以通过一些黑客来实现，并假设您已经知道中心元素的大小。该技术基本上为侧元素中的中心元素腾出空间。

关于这种复杂形状的程序的详细描述可以在2005年的ALA文章中找到：Cross-Column Pull-Out Part Two: Custom Silhouettes。

我已经提出了两个你可以做的基本例子。

示例1：使用.space元素

Demo

您所做的是拥有HTML结构，例如：

<div class="container">
    <div class="center"></div>
    <div class="left">
        <div class="space></div>
    </div>
    <div class="right>
        <div class="space></div>
    </div>
</div>

您有主页面容器，其作用是设置全局宽度，可能是内容的中心，有position: relative 。

然后你的CSS：

.container {

  position:  relative;
  width:     600px;

}

.left, .right {

  width:      50%;

}

.left { float: left; }

.right { float: right; }

.center {

  margin-left:      -75px; // Negative half the width
  width:            150px;
  height:           600px;
  position:         absolute;
  left:             50%;

}

.right .space { float: left;  }
.left  .space { float: right; }

基本上，您正在做的是创建一个.center大小的洞，在.left和.right列之间平均分区，然后将元素绝对定位在该洞内。

示例2：使用伪元素

Demo

相同的方法，但不使用额外的HTML元素，而是使用列的::before伪元素在其中创建一个洞。 CSS中唯一的变化是：

.left::before, .right::before {

  content: "";
  height: 600px;
  width:  75px;

}

.left::before { float: right; }

.right::before { float: left; }

这使得简单的两个侧列+一个中心列布局成为可能。但是，您可能需要根据布局的复杂程度添加其他元素，如ALA文章中所述。

正如我上面提到的那样，你必须知道中心元素的大小才能使其发挥作用。如果你愿意添加一点JS，你可以通过动态计算大小并相应调整大小来轻松解决这个问题。

可能还有一些其他仅使用CSS的方法比这更有效，但据我所知，没有本地方法可以将元素包装在另一个元素的两边。