10

コンテンツが 2 つの列に分割されているが、列の中央に引用ボックスがある Web サイトの新聞レイアウトを作成する方法を探しています。

CSS3を使用して2つの列を作成する方法を知っています 

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

しかし、中央に引用ボックスを作成するにはどうすればよいですか?また、中央のボックスの周りに列内のコンテンツを「ラップ」する方法はありますか?

私が言いたいことのイラストを添付しました。
この図で、2 つの列のテキストが中央のボックスに巻き付けられていることを想像してください。

ニュースレターのレイアウト

4

4 に答える 4

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 をラップしていない) に基づいています。

于 2012-08-22T16:25:19.990 に答える
0

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

列を分割する JavaScript を追加して、@sean_mcgee の回答を修正しました。テキストをnewspaperArticlediv に配置し、引用符を JavaScript フィールドに入力するだけです。単語がスペースよりも長いため、小さな画面ではうまく機能しません。フルスクリーンの例を次に示します: http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/。唯一の問題は、HTML タグが分割される可能性があることです。注意してください。

于 2012-08-28T00:07:56.560 に答える
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>
于 2012-08-22T15:48:56.863 に答える
0

それは達成できますが... 柔軟ではありません。テキストに加えたほとんどすべての変更に対して、配置を微調整する必要があります。

デモ

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;
}
于 2012-08-22T16:04:14.217 に答える