2

2 つのブロックが並んでいます。1 つのサイズは固定されており90px、もう 1 つは固定されていません。コンテナーのサイズが変更されるため、もう 1 つのサイズをコンテナーの残りの部分に拡張したいと考えています。

これは、問題を表示するコメンドのフィドルです: http://jsfiddle.net/L6CSG/

HTML

<div class="container">
    <span class="left"></span>
    <span class="right"></span>
</div>

CSS

.left, .right {
    height: 30px;
    display: inline-block;
    margin: 0px;
    float: left;
}

.left {
    background: green;
    width: 90px;
}

.right {
    background: blue;
    width: 100%; // How can I make it fit the rest of the container?
}

.container {
    width: 400px; // This value is NOT STATIC
}
4

5 に答える 5

1

解決策 1:

の幅を作る.right width: calc(100% - 90px);

解決策 2:

http://jsfiddle.net/L6CSG/4/このソリューションの場合、スパンをブロック要素に変更したため、おそらくスパンの代わりに div を使用する必要があります。

于 2013-07-22T12:10:11.633 に答える
1

あなたは純粋なCSSでそれを行うことができます、ここに動作例jsFiddleがあります

  1. フィラーelementがDOMツリーの最後であることを確認してください
  2. 残りの要素がposition: relative幅+高さを指定していることを確認してください

これは私が学んだ素晴らしいトリックです:

HTML :

<div id="container">
    <div class="left"></div>
    <div class="rest"></div>
</div>

CSS :

#container {
    width:50%;
    height: 50px;
    background-color: red;
    min-width: auto;
}
.left {
    position: relative;
    float: left;
    width: 90px;
    height: 100%;
    background: blue;
}
.rest {
    display: block;
    height: 100%;
    overflow: hidden;
    background: yellow;
}
于 2013-07-22T12:40:11.330 に答える
0

解決策は次のとおりです。

HTML:

<div class="container">
<span class="left"></span>
<span class="right"></span>
</div>

CSS:

.left, .right {
    height: 30px;
    margin: 0px;
    display: block;
}

.left {
    background: green;
    width: 90px;
    float: left
}

.right {
    background: blue;
    width: auto;
}

.container {
    width: 400px; 
}
于 2013-07-22T12:02:57.237 に答える
0

float: left左のものだけを設定する必要があります

結果を見る: http://jsfiddle.net/L6CSG/2/

また、あなたは正しいもののためにdisplay: block必要ですwidth: auto

于 2013-07-22T12:09:05.563 に答える
-1

コンテナーは固定幅ではないため、埋めることができる余分なスペースを計算するには JavaScript が必要です。

var con = document.querySelector(".container");
var left = document.querySelector(".left");
var right = document.querySelector(".right");

window.addEventListener('resize', function() {
   calcSize(); 
});

function calcSize() {
    var diff = con.offsetWidth - left.offsetWidth;
    right.style.width = diff + "px";
}

calcSize();

http://jsfiddle.net/L6CSG/7/

于 2013-07-22T12:17:47.037 に答える