報紙佈局與兩列和一個報價框居中？

Question

我正在尋找一種方式來創建一個網站的報紙佈局，其中的內容分爲兩列，但在列中間有一個報價框。

我知道了如何使用CSS3兩列與

-moz-column-count: 2; 
-moz-column-gap: 10px; 
-webkit-column-count: 2; 
-webkit-column-gap: 10px; 

但我怎麼在中間創建報價框，有沒有什麼辦法，我「包裝」周圍的柱子裏面的內容盒子在中間？

我附上了我的意思。
請在這個插圖中想象一下，兩欄中的文字圍繞中間的方框。

Answer 1

我想這是錯誤的，但...：

<style> 
#one { 
    float:left; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#two { 
    float:right; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#three { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-top:-150px; 
    margin-left:-100px; 
    border:1px solid; 
    width:200px; 
    height:200px; 
} 
</style> 
<div id="one">ONE</div> 
<div id="three">3</div> 
<div id="two">two</div> 

Answer 2

可以實現的，但是......這不靈活，你就必須調整定位於幾乎任何變化你對文本做出了決定。

DEMO

HTML

<div class='newspaper'> 
    <img src='http://img259.imageshack.us/img259/8049/birmancat.jpg'> 
    <p><!-- paragraph text --></p> 
     <!-- nine more paragraphs --> 
</div> 

CSS我說：

.newspaper { 
    position: relative; 
    width: 580px; 
    padding: 10px; 
    margin: 0 auto; 
    box-shadow: 1px 1px 5px; 
    column-count: 2; 
    column-gap: 20px; 
    font-size: 12px 
} 
p { margin: 0 0 10px; } 
p:nth-child(3):before, p:nth-child(8):before { 
    width: 145px; 
    height: 200px; 
    content: ''; 
} 
p:nth-child(3):before { 
    float: right; 
} 
p:nth-child(8):before { 
    float: left; 
} 
.newspaper img { 
    position: absolute; 
    z-index: 2; 
    top: 85px; left: 50%; 
    margin: 0 -150px; 
} 

Answer 3

這裏是一個有效的解決方案：

DEMO HERE

這會給你的專欄帶來靈活性。但是，您的報價區域必須是固定的高度/寬度。如果您想調整引號區域，請在每個列div的開頭更改分隔符div的寬度/高度。不是一個優雅的解決方案，但它有效。

CSS：

#one { 
    float:left; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#two { 
    float:right; 
    width:48%; 
    background-color:#f0f0f0; 
    min-height:400px; 
} 
#three { 
    position: absolute; 
    left:50%; 
    top:100px; 
    margin-left:-300px; 
    border:1px solid; 
    width:600px; 
    height:200px; 
    background: maroon; 
    color: white; 
} 

HTML：

<div id="one"> 
    <div style="float: right; height: 80px; width: 10px;"></div> 
    <div style="float: right; height: 210px; width: 300px; clear: both;"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div id="three">Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. </div> 
<div id="two"> 
    <div style="float: left; height: 80px; width: 10px;"></div> 
    <div style="float: left; height: 210px; width: 300px; clear: both;"></div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 

注意：這是建立在以下peteris解決方案（其中沒有周圍的報價DIV包）。

Answer 4

http://jsfiddle.net/iansan5653/xbfYD/4/

我加入一些JavaScript分裂列你修改@ sean_mcgee的答案。只需將文本放在newspaperArticle div中，並將您的報價放在JavaScript字段中。它在小屏幕上效果不佳，因爲單詞比空格長，所以這是一個全屏示例：http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/。唯一的問題是它可能會拆分HTML標籤，所以要小心。