13

div の配置について助けが必要です。HTML 構造は次のとおりです。

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

そして、私は次のCSSを持っています:

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

左の div の幅と高さは動的です。

私が達成したいことは次のとおりです。

  1. 右の div の高さを左の div の高さと等しくします。
  2. 右側の div の幅が div の残りの部分を class で埋めるようにしitemます。
  3. クラスのある段落bottomは、右側の div の下部にある必要があります。

これが私の目標を表す簡単な画像です。 ここに画像の説明を入力

JSFiddle デモへのリンク。

4

4 に答える 4

9

同じ高さで同じ行にある兄弟要素は、それらを として表示しtable-cell、親を として表示することで実現できますdisplay: table。
作業フィドル: http://jsfiddle.net/SgubR/2/ (列を作成するためoverflow: hiddenの浮動要素テクニックに沿って表示されます。後者には clearfix が必要です)

CSS のテーブルセルは、任意の HTML 要素 (section、div、span、li など) を使用します。そのセマンティクスは、テーブル レイアウトに使用される table、tr および td 要素とは無関係です (ただし、視覚的な結果は同じです。私たちは欲しい）。

  • display: table親に設定されています
  • display: table-row中間の要素で使用できますが、それなしで機能する場合は問題ありません
  • display: table-cell子ごとに設定されています
  • 幅は、これらの「セル」の一部またはすべてに設定されていません。ブラウザーは、幅を計算するためにコンテンツと幅の両方に適応します (もちろん、親の幅の合計も)
  • table-layout: fixedブラウザーに、コンテンツの量を気にせず、CSS によって設定された幅のみを気にする他のテーブル レイアウト アルゴリズムに切り替えるように指示します。
  • vertical-align: topほとんどの場合に必要になります (ただし、他の値を設定することもできます。複雑なレイアウトには最適です)。
  • マージンは「セル」には適用されず、パディングのみが適用されます。マージンはテーブル自体にのみ適用されます。border-collapse: separate「セル」をand/orで区切ることはできますが、border-spacing: 4px 6px

互換性: IE6/7 の IE8+
フォールバック (必要な場合) は、インライン ブロックの場合とまったく同じです。

以前の回答でのより長い説明:あちこちで古き良き偽柱の方法も使用しています(この手法を念頭に置いて設計を検討する必要があります)

于 2013-04-06T16:42:25.630 に答える
2

Just add an oveflow to the right column and don't float it.

.right {
  position: relative;
  overflow: hidden;
}

This will make right to fill the rest of the width.

于 2013-04-06T16:26:52.237 に答える
1

このようなものがうまくいくかもしれません：

http://jsfiddle.net/PCvy9/2/

探している行の主なキーは次のとおりです。

 .right {
   overflow: hidden;
   background-color: #C82927;
 }

これは、「ブロック フォーマット コンテキスト」と呼ばれるものによるものです。理由についての素晴らしい推論とチュートリアル: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

ただし、それらの高さは完全にリンクされているわけではありません。この例では、左側のブロックの高さを手動で設定する必要があります (フローティング コンテナーであるため)。

于 2013-04-06T16:31:36.503 に答える