css - 报纸版面有两栏和一个引号框居中？

Question

我正在寻找一种为网站创建报纸布局的方法，其中内容分为两列，但在列的中间有一个引号框。

我知道如何使用 CSS3 和

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

但是我如何在中间创建引号框，有什么方法可以将内容“包裹”在中间框周围的列中？

我附上了我的意思的插图。
请想象在这个插图中，两列中的文本被包裹在中间的盒子周围。

Answer 1

这是一个有效的解决方案：

在这里演示

这将为您的列提供灵活性。但是，您的报价区域必须是固定的高度/宽度。如果要调整引用区域，请更改每个列 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 2

它可以实现，但是......它不灵活，您必须调整位置以适应您对文本所做的几乎任何更改。

演示

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

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

我通过添加一些 JavaScript 为您拆分列来修改 @sean_mcgee 的答案。只需将文本放在newspaperArticlediv 中，然后将您的报价放在 JavaScript 字段中。它在小屏幕上效果不佳，因为单词比空格长，所以这里是一个全屏示例：http: //jsfiddle.net/iansan5653/xbfYD/4/embedded/result/。唯一的问题是它可能会拆分 HTML 标签，所以要小心。

Answer 4

我想这是错误的，但是......：

<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>