3

次のような 3 列のページを作成しようとしています。

ここに画像の説明を入力

タイトルを 2 列だけにまたがるようにすることはできますか? 除外を使用しても結果は得られません=(行き詰まっています!

フローティング テキストを使用して 3 つの列を作成する必要があります。

 -webkit-column-count: 3;
 -webkit-column-gap: 1em;
 -webkit-column-rule: 2px solid #B8B8B8;

したがって、テーブルを使用することは解決策ではありません

4

5 に答える 5

1

CSS3 はcolumn-countこの目的のために特別に提供されていますが、残念ながら古いブラウザーではサポートされていません。

.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}

デモ

于 2013-09-27T14:12:03.740 に答える
1

スタイルで DIV を使用して、float:left2 つの列を隣り合わせに配置できます。そして、タイトル付きの DIV はそれらの上に行くことができます。

デモ: http://jsfiddle.net/6cttL/

于 2013-09-27T14:12:08.703 に答える
0

あなたの文書構造がその画像の下にあるのかどうかはわかりませんが、一般的な手法は、レイアウトを簡素化するためにコンテンツのブロックの周りに「ラッパー」div を配置することです。

したがって、一番右のコンテンツを div に配置し、左側のすべてを div に配置します。左の div 内に見出しがあり、その下に 2 つの列を含む div があります。

<div id="rightMain">...</div> <!--Float right-->
<div id="leftMain">
    <h2>Article Title</h2>
    <div id="article">
        <div id="leftArticleCol">...</div>
        <div id="rightArticleCol">...</div>
    </div>
</div>
于 2013-09-27T14:09:26.797 に答える