1

このフィドルで示すフロートで小さな問題に遭遇しました。

左に浮動する DIV があり、その幅は動的 (不明) です。同じブロック内で右にフロートする別のブロックがあり、幅も動的です。

問題は、最初のブロックの幅が拡張されて右側のフロートと衝突する場合、右側のフロートが (正しく) 下に落ちて、衝突が発生していないことを確認することです。ただし、私はそれを一番上に置いておきたいです(垂直方向、つまり、z-indexに関してではありません)。

基本的には右側のブロックを「ずらす」ということでテキスト優先のようです。これは逆である必要がありますが、左側のテキストは、折り返しを開始する前に、一番上の行の使用可能なスペースを使い果たします。

解決策はかなり単純だと思います。まったく頭に浮かばず、検索しても探していたものが見つかりませんでした。

4

2 に答える 2

2

css テーブルを使用してみることをお勧めします。両方の要素を作成してテーブルにし、右要素と左要素をテーブルセルにします。

#wrapper {
  display: table;
  width: 100%;
}
#leftside, #rightside {
  display: table-cell;
  width: 50%; /* Both sides will be rendered on one line */
  vertical-align: top;
}
/* Position elements within the cell */
#leftside { text-align: left; }
#rightside { text-align: right; }
#leftside > div, #rightside > div {
  display: inline-block;
  text-align: left; /* Reset text alignment */
}

説明: テーブル構造は要素を幅 50% の 1 行に保持します。内側の要素 (この場合は div) はインライン ブロックになるため、左または右に配置できます。内側の div の 1 つが最大幅の 50% を超えると、もう一方の「セル」側が小さくなります。

于 2012-10-17T15:59:00.550 に答える
1

タイトル div 内にラベル div をフロートさせます。これにより、いずれかの幅に関係なく、ラベルの周りにタイトル テキストがラップされます。

<div class="infoBox">
<div class="inner">
    <div class="entry">
        <div class="title">
        <div class="type">
            LABEL
        </div>
            If this text is longer, the LABEL will drop downwards.
            I would like to have the LABEL float right (as it does here) but also be at the top of the block. 
        </div>
    </div>
</div>

</p>

于 2012-10-17T15:52:07.357 に答える