4

ツールバーを作成しています。次の例の黄色の部分で、スペース全体を左（白）にします。

http://jsfiddle.net/MWjGH/1/

<div class="left"> Some content </div>
<span class="middle"> This should fill the space left </span>
<div class="right"> Some other content </div>

cssを使用：

.left {
    float: left;
    background-color: #ddd;
    display: inline-block;
}
.middle {
    background-color: yellow;
    display: inline-block;
}
.right {
    float: right;
    background-color: #ddd;
    display: inline-block;
}

編集：左右のコンテンツは動的で、変更される可能性があるため、幅を設定したくありません

4

5 に答える 5

10

HTMLが少し変更されたため、それがあなたに適しているかどうかはわかりません。

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<span class="middle"> This should fill the space </span>

しかし、私はそれがあなたが望むものだと信じています、

CSS：

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
    display: block;
    overflow:hidden;
}
.right {
    float: right;
    background-color: #ddd;
}

デモ：http：//jsfiddle.net/pavloschris/MWjGH/12/

于 2013-03-15T09:04:30.037 に答える
6

フローティング div の後に中間 div を配置します。

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<div class="middle"> This should fill the space left </div>

display次に、どのプロパティも変更しないで、オンのままにしblockます ( のデフォルトdiv) 。

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
}
.right {
    float: right;
    background-color: #ddd;
}

フィドル: http://jsfiddle.net/hLmj7/

于 2013-03-15T08:56:30.340 に答える
3

両側の列の幅が固定されていない場合は、いつでもdisplay:table-cell.

.left {
    background-color: #ddd;
    display: table-cell;
}
.middle {
    background-color: yellow;
    display: table-cell;
    width:100%;
}
.right {
    background-color: #ddd;
    display: table-cell;
}

JSFiddle の例。

min-widthこれにより、中央の要素の幅を変更し続けることなく、外側の列に追加できます。

min-widthを適用したJSFiddle の例。

于 2013-03-15T08:58:41.140 に答える
0

これを試して：

最後のdivを右揃えにしないでください

すべてのコンテナを作成しますfloat:left

各コンテナーにパーセンテージ幅を指定して、合計が 100% になるようにします。

ワーキングフィドル

静的な幅を強制したくない場合は、次のようにします。

各コンテナに を付けますwidth:autoが、通知されます

各コンテナーの幅の合計が親 (この場合は body) コンテナーの幅よりも大きい場合、改行が発生し、div が次の行にスライドします。

このフィドルを参照してください

于 2013-03-15T09:00:06.340 に答える
0

div をラッパーでラップし、background-color をラッパー div に割り当てます。次に、幅を指定する必要はまったくありません。 jsfiddle

HTML:

<div class="toolbar">
    <div class="left"> Some content </div>
    <div class="middle"> This should fill the space left </div>
    <div class="right"> Some other content </div>
</div>

CSS:

.toolbar {
    background-color: yellow;    
}
.left {
    float: left;
    background-color: #ddd;
    display: inline-block;
}
.middle {
    display: inline-block;
}
.right {
    float: right;
    background-color: #ddd;
    display: inline-block;
}

内部のdivはフローティングであるため、ラッパーdivにclearfixを追加することを検討してください:)

于 2013-03-15T09:00:37.407 に答える