1

各セクションの間に境界線があり、応答性を維持する、同じ高さの複数の列を作成するにはどうすればよいですか...（下の画像を参照）。2つの列がある場合は背景画像を使用できることは知っていますが、それ以上ある場合は、レスポンシブ部分全体が機能します。

編集：ここに私が作ったjsfiddleがあります：http：//jsfiddle.net/kF9LA/

目的のレイアウトのモックアップ

4

4 に答える 4

2

2つのbg画像についてはどうでしょうか。1つは左から1/3の境界線があり、もう1つは右から1/3の境界線があります。background-position:33.3% 0;次に、それぞれとのコンテナのペアにそれらを適用しますbackground-position:66.6% 0;。

中央に境界線がある単一の画像を使用するのと同様です。background-position:50% 0;

編集：

クイックテストを実行した後、これは機能しているようで、流動的/応答性があります。

HTML

<div class="container">
    <div class="bg1">
        <div class="bg2">
            <div class="content">...</div>
        </div>
    </div>
</div>

CSS

.container {width:100%; border:2px solid #000;}

/* Tile a 2x1 image for the border */
.bg1 {background:url(img/border.png) repeat-y 33.3% 0;}
.bg2 {background:url(img/border.png) repeat-y 66.6% 0;}

編集2：

.contentから削除し、デモheight:200px;にいくつかのテキストコンテンツを追加して、コンテンツに基づいて高さが増加する可能性があることを示します。2つのbgイメージを1つの2x1イメージに置き換えました。

于 2012-06-14T18:31:31.880 に答える
1

私はここに同様のスレッドでいくつかの答えを持っています。これを行うための最良の方法は、divが同じ高さであることをユーザーに視覚的に確認する必要があるかどうかに完全に依存します。最終的なサイトがこのモックアップのように見える場合（唯一の視覚的な手がかりは境界線です）、必ずしもMJTの方法を使用する必要はなく、代わりにこのような背景画像を使用できます。

上記のリンクのコメントに記載されているように、この方法は水平方向に流動的なレイアウトでは機能しませんが、固定幅のレイアウトを使用している場合は、背景画像を好きなだけ列に使用できます。あなたが数学が正しいことを確認してください:)

ただし、レイアウトを完全に流動的にする必要がある場合は、MJTの方法が最適です。追加のマークアップが必要ですが、防弾です。

于 2012-06-14T18:25:28.803 に答える
1

Matthew James Taylorのソリューションをご覧ください：http： //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-06-14T18:13:48.933 に答える
0

これを実現する最も簡単な方法は、セルが境界線で囲まれたテーブルを使用することですが、時間が長い場合は、@nebulousGirlが提案するCSSアプローチがその方法です。

于 2012-06-14T18:17:41.500 に答える