0

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

4

1 回答 1

2

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

可在 2005 年 ALA 文章：Cross-Column Pull-Out Part 2：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 的方法比这更有效，但据我所知，没有本地方法可以让元素在另一个元素的两侧包装。

于 2013-03-29T17:22:15.780 回答