使主柱包裹在侧柱中浮动的超大元素？

Question

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

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

小提示显示所需的布局，但内容不会包含侧边栏溢出。

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

Answer 1

原始解决方案

假设您的溢出是一个集合width和height（作为您的示例），那么伪元素在这里很有用。 See the fiddle

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

更灵活的解决方案

我知道获得尺寸灵活性的唯一方法是将项目移动到内容区域。 See this fiddle。所以这个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/