报纸布局有两列和报价框居中?

时间:2012-08-22 15:39:18

标签: css css3 layout css-multicolumn-layout

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

我知道如何使用带有

的CSS3制作两列
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;

但是如何在中间创建引用框,是否有任何方法可以将内容中的内容“包装”在中间的框中?

我附上了我的意思 请想象一下,在这个插图中,两列中的文本都围绕着中间的框。

Newsletter Layout

4 个答案:

答案 0 :(得分:1)

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

DEMO HERE

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

答案 1 :(得分:0)

我想这是错的但是......:

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

答案 2 :(得分:0)

它可以实现,但是......它不灵活,你必须调整几乎任何你对文本所做的改变的定位。

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

答案 3 :(得分:0)

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

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