2

幅が不明な要素が2つあり、1つは左に、もう1つは右に浮かんでいます。それらの間に、コンテナの幅に合うように拡張されたブロックがあります。

私が達成したいレイアウトはこれです：

+---------------------------------------------+
| [Left] [Expanded                  ] [Right] |
+---------------------------------------------+

しかし、右に浮かぶ要素は次の行にクリアされます。

+---------------------------------------------+
| [Left] [Expanded                          ] |
|                                     [Right] |
+---------------------------------------------+

要素がHTMLでLeft、Right、Expandedの順序である場合は正常に機能します。しかし、よりセマンティックにするには、Left、Expanded、Rightの順序が必要です。

このjsFiddleを参照してください。

出来ますか？ラッパーが必要な場合でも...

4

2 に答える 2

1

あなたはそれを使用してそれを行うことができます：http display: table：//jsfiddle.net/thirtydot/GpL5A/3/

HTML：

<div class="expandoooo">
    <span class="left">Left</span>
    <span class="expanded">Expanded</span>
    <span class="right">Right</span>
</div>​

CSS：

.expandoooo {
    background-color: lightgray;
    display: table;
}
.expandoooo > span {
    display: table-cell;
}

.left {
    color: red;
}
.expanded {
    background-color: black;
    color: white;
    width: 100%;
}
.right {
    color: blue;
}

この手法の小さな欠点は、JavaScriptの修正がありますが、死にかけているブラウザーIE7がサポートしていないdisplay: tableことです。

于 2012-11-09T00:13:16.650 に答える
0

フロートの使用に制限されている場合は、.leftと.expandedの両方が左にフロートされていることを確認する必要があります。.rightを押し下げないように、max-widthも使用することをお勧めします。

.left, .expanded {
   float: left;
}
于 2012-11-09T00:43:31.233 に答える