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

【问题标题】：Newspaper layout with two columns and a quotation box centered?报纸版面有两栏和一个引号框居中？
【发布时间】：2012-08-18 02:06:23
【问题描述】：

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

我知道如何使用 CSS3 和

制作两列

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

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

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

【问题讨论】：

请参阅this List Apart article，其中还包括一个用于 3 列布局的选项。（演示在底部。）

标签： css layout css-multicolumn-layout

【解决方案1】：

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

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

【讨论】：

我会将它与 CSS3 的 text-justify 属性一起使用：w3schools.com/cssref/css3_pr_text-justify.asp

【解决方案2】：

这是一个可行的解决方案：

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）之上。

【讨论】：

【解决方案3】：

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

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

【讨论】：

大家好，感谢您的意见和建议。 “alistapart”上的示例很好地说明了我想要完成的工作，但它显示了一个非常静态且不灵活的解决方案，其中文本和框的长度和位置是已知的。在文本长度未知的情况下，是否可以使其动态化？在这些示例中，有两个 div，对于我要连续填充它们，我必须拆分文本字符串并将它们平均插入每个 div，然后计算中间框的位置？再次感谢您的帮助。
我想我可以用 JQuery 做到这一点。我会尽快处理并发布我的答案。

【解决方案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>

【讨论】：