是否可以使用Blueprint的push-x和pull-x类创建一个重叠的列，该列在一列中有一半而在另一列中有一半？
以下是一个例子：
+-------+-----+-------+
| | | |
| 1 | 2 | 3 |
| +-----+ |
| | |
| | |
+----------+----------+
我找到了AListApart的Cross-column pull-outs文章。但是，它处理的是一个已知高度的中间柱，并使用必须手动放置的垫片，这使得自动化变得困难。
是否有更简单，更自动的方法来实现这种效果？
更新：为不使用静态高度中间列的解决方案或使用javascript调整中间列大小的解决方案添加了赏金。
答案 0 :(得分：2)
这是解决问题的另一种方法。它的缺点是拉出的内容是重复的（一个向左浮动，一个向右浮动）。
修改
使用JQuery将备份内容复制到spacer中的备用版本：
修改
改进，更清洁，更精简的版本，使用clone复制拉出。
答案 1 :(得分：0)
你能用定位来达到这个效果吗？如果你有一个固定的宽度，它应该很容易实现。
<div id="container">
<div id="primary">
<p>test</p>
<p>test</p>
</div>
<div id="secondary">
<p>test</p>
<p>test</p>
</div>
<div id="tertiary">
test
</div>
CSS
#container {
position: relative;
width: 200px;
}
#primary {
position: absolute;
top: 0;
left: 0;
width: 50%;
background-color: red;
}
#secondary {
position: absolute;
top: 0;
right: 0;
width: 50%;
background-color: blue
}
#tertiary {
position: relative;
top: 0;
margin: 0 auto;
width: 50px;
background-color: green;
}
答案 2 :(得分：0)
使用一点点javascript来修改AListApart示例似乎并不难，所以你不需要固定的高度：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
Cross-Column Pull-Out: Example 3
</title>
<style type="text/css">
* {margin:0;padding:0;}
p {padding:.625em 0; text-align:justify; line-height:20px;}
#overall {width:755px; margin:0 auto;}
.col {width:365px; padding:0 5px; float:left;}
.CCspace {width:175px; padding:5px; float:right;}
.CCpullout {width:350px; padding:5px; float:left; margin-left:-185px;}
.CCpullout span {width:350px; position: absolute; text-align:center; font-size:.9em; font-weight:bold;}
</style>
</head>
<body>
<!-- The Cross-Column Pull-Out technique was developed by Daniel M. Frommelt and Matthew Latzke from the University of Wisconsin - Platteville -->
<div id="overall">
<h1>Example 3: Fixing the Pull-Out</h1>
<div class="col">
<span class="CCspace"> </span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.</p>
<p>Praesent congue sagittis elit. Nullam sagittis tortor ut dui. Praesent tristique feugiat ligula. Quisque congue ante vel augue facilisis nonummy. Nulla auctor, purus id ullamcorper ultrices, justo metus venenatis odio, eu nonummy pede urna pretium tortor. Aliquam erat volutpat. Nullam ante. Aenean feugiat. Etiam lacinia dolor sagittis nunc. Maecenas nibh risus, suscipit vel, elementum vitae, posuere et, purus. Vivamus ipsum nunc, mattis non, gravida ut, tempor et, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sem. Integer accumsan mi sed metus porta volutpat. Duis sollicitudin enim at diam. Donec ultrices sem aliquam ante ullamcorper placerat.</p>
</div>
<div class="col">
<span class="CCpullout"><span><img src="http://www.alistapart.com/d/crosscolumn/monkey.jpg" alt="" /></span>And then some more text<br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.</span>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tristique arcu vitae dui. Ut tempus wisi eget urna. Nullam laoreet scelerisque felis. Aliquam turpis libero, iaculis nec, porta nec, condimentum The office monkey, riding the office camel. sit amet, dolor. Proin cursus orci eu purus. In quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan, augue vitae vehicula viverra, risus velit consequat nunc, ut molestie erat risus non dui. Morbi placerat leo. Maecenas iaculis elit at eros. Cras sem. Phasellus augue.</p>
<p>Integer molestie eros et urna. Aenean egestas lectus ac mi. Etiam semper lectus at ipsum. Nunc cursus wisi eget urna. Donec pretium tristique sapien. Integer ligula nunc, malesuada gravida, posuere luctus, semper sit amet, nunc. Cras sagittis blandit urna. Nunc eu arcu sed magna vestibulum dictum. Fusce pretium interdum risus. Praesent bibendum lacinia sem. Aliquam erat volutpat.</p>
<p>Nunc arcu. Ut faucibus purus in risus. Morbi sem. Nunc consequat, sem a suscipit scelerisque, leo tortor sollicitudin nibh, quis vehicula turpis nibh et lorem. Fusce facilisis semper felis. Cras quis magna. In hac habitasse platea dictumst. Etiam quam nisl, bibendum et, tincidunt vel, tristique sed, eros. Cras laoreet. Etiam nisl eros, luctus nec, eleifend vitae, aliquam id, sapien.</p>
</div>
<script>
var pullout = document.getElementsByClassName('CCpullout')[0];
var spacer = document.getElementsByClassName('CCspace')[0];
spacer.style.height = pullout.offsetHeight + 'px';
</script>
</div>
</body>
</html>
我唯一做的就是移除固定的高度（如果需要，你可以放入最小高度，但这并不重要）并在尽可能早的时候添加一个小脚本，以尽量减少页面渲染时的任何可见移动
答案 3 :(得分：0)
只需使用这种风格
#Main
{
width: 950px;
height: auto;
padding: 0px;
margin: 0px;
}
#Top
{
width: 950px;
height: 100px; /* you can use ato or whatever else */
}
#Bottom
{
width: 950px;
height: 100px; /* you can use ato or whatever else */
}
#TLeft, #TMiddle, #TRight
{
display: inline-block; /* this is neceesarybecause we use span */
border: solid 1px black;
width: 310px;
height: 100px; /* you can use ato or whatever else */
vertical-align: top;
}
#TLeft
{
float: left;
}
#TMiddle
{
float: none;
}
#TRight
{
float: right;
}/* note that You can use all of them as float:left or, float:right */
#BLeft, #BRight
{
display: inline-block; /* this is neceesarybecause we use span */
border: solid 1px black;
width: 445px;
height: 100px; /* you can use ato or whatever else */
vertical-align: top;
}
#BLeft
{
float: left;
}
#BRight
{
float: right;
}/* note that You can use all of them as float:left or, float:right */
<div id="Main">
<div id="Top">
<span id="TLeft">
TopLeft
</span>
<span id="TMiddle">
TopMiddle
</span>
<span id="TRight">
TopRight
</span>
</div>
<div id="Bottom">
<span id="BLeft">
BottomLeft
</span>
<span id="BRight">
BottomLeft
</span>
</div>
</div>
请注意，您可以更改宽度以获得更好的对齐效果。