6

右の列を固定して同じ行に 2 つの要素を保持するにはどうすればよいですか? 右の div を固定サイズにし、左の列を流体にしたいのですが、長いテキストを左の div に挿入すると、右の div が次の列に移動します。

例: http://jsfiddle.net/Jbbxk/2/

純粋な CSS ソリューションはありますか?

注意！ラップ div には動的な幅が必要です! デモストレーションの目的で、幅が固定されているため、ラップされます。

乾杯！

4

5 に答える 5

11

これは、必要なことを行うための一般的な方法の1つです。

.wrap {
    position: relative;
    margin: 5px;
    border: 1px solid red;
}
.left {
    float: left;
    background-color: #CCC;
    margin-right: 48px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-color: #888;
}

説明：

  • 流体の左の列は幅全体を埋めますが、右の列のスペースを節約しますmargin-right: [right column width];
  • 固定された右の列は、上部0、右側0（正しい場所）の絶対位置に配置されます
  • ラップdivが割り当てられるため、それposition: relativeに応じて正しい列の位置が決定されます。
于 2012-07-12T12:02:04.033 に答える
8

float:left; を削除するだけです。左のクラスから、HTML で右のフローティング アイテムをそれらの上に配置します。

更新フィドル

于 2012-07-12T11:57:16.587 に答える
1

ここに別の解決策があります。設定display: table-cell;

http://jsfiddle.net/Jbbxk/54/

.left {
    /*display: left;*/
    display: table-cell;
}
.right {
    float: right;
    display: table-cell;
}

また、フローティング div が最初に来ます。

<div class="right">
    &nbsp;
</div>
<div class="left">
    Looooooooong content - pushes right to next row<br>
    NOT OK
</div>
于 2014-04-21T04:58:04.890 に答える
0

できるよ

.left {
    max-width: 152px;
}
于 2012-07-12T11:39:50.687 に答える
0

ダイナミクス幅があるので、 % like を使用します

.left {
float: left;
background-color: #CCC;
width:75%;
}

フィドル リンクを更新しました: http://jsfiddle.net/Jbbxk/6/

于 2012-07-12T11:46:04.813 に答える