html - 让主列包裹一个漂浮在侧列中的超大元素？

Question

所以我有这个小提琴来展示我想要实现的目标：http: //jsfiddle.net/vbqmq/28/

我有一个两列布局，但我希望主要内容中的一些元素溢出到侧栏上，并使主要内容文本环绕部分保留在主要内容块中的元素。

小提琴显示了所需的布局，除了内容没有包装侧边栏溢出。

我没有附加到 HTML 中的当前排序。如果我需要将其放入 中container，那很好，但如果我这样做，则旁边仍需要保持在cross-column块下方。

Answer 1

原始解决方案

假设您的溢出是一个集合width并且height（作为您的示例），那么伪元素在这里可能很有用。见小提琴。

#content:before {
    content: '';
    display: block;
    float: right;
    width: 50px;
    height: 100px;
}

更灵活的解决方案

我知道在维度上获得灵活性的唯一方法是将项目移动到内容区域。看到这个小提琴。所以这个html：

<div id="wrapper">
  <div id="main">
    <div id="container">
      <div id="content">    
        <div id="cross-columns"></div>    
        <div id="aside"></div>
        <p>Main content follows</p>
      </div>
    </div>
  </div>
</div>

对原始 CSS 进行一些边距调整：

#cross-columns{
    margin: -10px -160px 0 0;
}

#aside{
    margin-right: -160px;
}

Answer 2

我仍然不能 100% 确定你在问什么，但我知道这个小 jquery 插件会将文本环绕在任何非常酷的形状上。

http://baconforme.com/