是否可以使用Blueprint的push-x和pull-x類創建一列一半，另一列一半的重疊列？藍圖：將列部分推入另一列
下面是一個例子：
+-------+-----+-------+
| | | |
| 1 | 2 | 3 |
| +-----+ |
| | |
| | |
+----------+----------+
我發現AListApart的Cross-column pull-outs文章。但是，它涉及一個已知高度的中間列，並使用必須手動放置的間隔器，從而使自動化變得困難。
是否有一種更簡單，更自動的方式來實現這種效果？
更新：爲不使用靜態高度中間列或使用javascript調整中間列大小的解決方案增加了一個賞金。
下面是解決問題的另一種方法。這是失敗的是，拉出的內容是重複的（一個向左浮動，一個向右）。
編輯
使用jQuery拉的內容複製到該間隔替代版本：
編輯
改進，更清潔，更精簡版本，使用clone複製拉出。
您可以使用定位來達到這種效果？如果你有一個固定的寬度，它應該很容易實現。
<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; }
這將不允許文本環繞中間列，如下所示：http://jsbin.com/ewahu – matpie 2010-01-12 00:25:44
這似乎並不難修改AListApart例子只是一個小JavaScript來做到這一點所以你不需要修復ED高度：
<!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>
我做的唯一的事情就是取消固定高度（你可以把在最小高度，如果想要，但它沒多大關係），並在儘可能早的點添加一個小腳本，以儘量減少頁面呈現時的任何可見移動。
只要使用這種風格
#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>
只是注意，你可以改變寬度獲得更好的一致性。
如果有一些JS伴隨它（jQuery自動將內容複製到分隔符中），我願意爲此解決。 – matpie 2010-01-11 23:41:29
如果你想這樣做，這將是很容易實現。就我個人而言，我認爲它更強大，以保持它無javascript。 – graphicdivine 2010-01-12 19:17:54
我正在尋求一種漸進式增強。如果他們沒有啓用JS，那麼該列將不會顯示在中間。它會簡單地顯示到一邊，並且通常很無聊。 – matpie 2010-01-15 19:04:33