0

この質問にスクリーンショットを添付しました。3 つの列があり、3 つの列すべての高さをまったく同じに保ちたいと考えています。高さに合わせたいと思ったので、幅のcssプロパティで幅を同じに保つことができました。この点で誰でも私を助けることができますか？前もって感謝します。ここに画像の説明を入力

4

3 に答える 3

1

これを実現するには、次の CSS を使用します。

.wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.column {
    display: table-cell;
}

table-layout: fixedすべての子要素にdisplay: table-cell同じ幅、ラッパーの幅に基づいて均等に分散され、高さが等しいことを伝えています。

デモ

于 2013-04-03T10:30:31.753 に答える
0

純粋な CSS では、CSS3 列を使用できます。3 列のレイアウトの場合は、次のようにしてみてください。

<div style="columns:3">...</div>

( と の両方-moz-の-webkit-プレフィックスを使用)リファレンスについては、 https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts
を 参照してください。特に、高さのバランスについては次のとおりです。

高さのバランス
CSS3 列の仕様では、列の高さのバランスがとれている必要があります。つまり、各列のコンテンツの高さがほぼ等しくなるように、ブラウザーが列の最大高さを自動的に設定します。

于 2013-04-03T10:15:03.033 に答える
0

これを行うための正しいクロスブラウザの方法は実際にはありませんが、いくつかのハックに頼る必要があります。

  1. 私が以前に使用した方法は、コンテナー内に 3 つの列をラップし、ホール コンテナーにカスタム背景を設定することです。基本的に、ウェブサイトと同じ幅で2 本の垂直線を持つ画像を作成し、それをコンテナーの背景として設定します。

    <div class="wrapper">
    <div class="column">....</div>
    <div class="column">....</div>
    <div class="column">....</div>
</div>

<style> .wrapper { background-image: url(wrapper-bg.png); } </style>

  2. これを実現するには、 http: //www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200のようなJavaScript ライブラリを使用できます。ただし、この方法は、列の高さが動的に変化する場合 (たとえば、折りたたみ可能なアイテムがある場合) には機能しません。もちろん、これらのイベントを処理して高さを再計算することで、このケースを処理できます。

  3. 最後に、 height: 100%を使用できます。ただし、見た目ほど単純ではありません。このソリューションは、ブロック要素に対してのみ機能し、親のサイズを知る必要があります。したがって、事前に Web サイトのサイズがわかっている場合は、次のようなことができます。

    <div class="wrapper">
    <div class="column">....</div>
    <div class="column">....</div>
    <div class="column">....</div>
</div>

<style>
    .wrapper { height: 1000px; width:900px; }
    .column { width:300px; float:left; height: 100%; }
</style>

うまくいけば、これは将来的に簡単になります....

于 2013-04-03T10:24:43.743 に答える