17
4

8 に答える 8

18

更新された回答:

ここでの答えはかなり古いです。現在、これはフレックスボックスを使用して簡単に実現できます。

.container {
  border: 4px solid red;
  display: flex;
}
.content {
  border: 4px solid green;
  flex-grow: 1;
  margin: 5px;
}
.sidebar {
  border: 4px solid blue;
  margin: 5px 5px 5px 0;
  width: 200px;
}
<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    Lorem ipsum.
  </div>
</div>

元の答え:

<div> のようなブロック レベルの要素は、使用可能な幅の 100% を自動的に埋めます。それらの 1 つを右にフロートさせると、もう 1 つのコンテンツが残りのスペースを埋めます。

<div style="height: 100px; border: 3px solid red;" id="container">
  <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
  <div style="border: 3px solid green;">Fill</div>
</div>

http://jsfiddle.net/5AtsF/

于 2011-11-24T05:20:19.307 に答える
3

これを見ている人にとっては、これをはるかに柔軟な方法で実行できる calc と呼ばれる新しい css プロパティ メソッドがあります。

<div class="container">
    <div class="fixedWidth"></div>
    <div class="variableWidth"></div>
</div>

.fixedWidth{
width:200px;
}
.variableWidth{
width:calc(100%-200px);
}

警告の言葉として、これはあまり移植性がなく、モバイル デバイスでのサポートは不安定です。IOS 6+ および android 4.4 だと思います。ただし、IE 9.0 以降では、デスクトップのサポートが大幅に向上しています。

http://caniuse.com/calc

私は過去に JS ハックを使用してこのテクニックを実現しましたが、サイズ変更が遅くなるため、別のレイアウトをお勧めします。

window.addEventListener('resize', function resize(){
    var parent = document.getElementById('parent');
    var child = document.getElementById('child');
    child.style.width = parseInt(parent.offsetWidth - 200) + "px"; //200 being the size of the fixed size element
}, false);
于 2014-07-11T14:33:45.923 に答える
2

これはあなたのために行う必要があります：

<div style="position: absolute; width: 100%; height: 100px; border: 3px solid red;" id="container">
    <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
    <div style="display: block; margin-right: 100px; border: 3px solid green;">Fill</div>
</div>

jsFiddleを参照してください

これは、最終結果から3pxの境界線を削除することを前提としています（境界線の幅が幅に含まれていないため、例では重なり合っています）。

于 2011-11-24T05:26:15.147 に答える
1

このためのusedisplay:tableプロパティを使用して、マークアップを変更せずにこれを達成できます。

.parent{
    position: absolute;
    left:0;
    right:0;
    height: 100px;
    border: 3px solid red;
    display:table;
}
.fill{
    margin-right: 100px;
    border: 3px solid green;
    display:table-cell;
    width:100%;
}
.fixed{
    width: 100px;
    border: 3px solid blue;
    display:table-cell;
}

なしでライブ例を確認してくださいhorizontal scrollbar

http://jsfiddle.net/WVDNe/5/

別の例ですが、より良い方法でこれを確認してください：

http://jsfiddle.net/WVDNe/6/

注：IE7以下では機能しません

これもチェックしてください

http://jsfiddle.net/LJGWY/4/

すべてのブラウザで動作します。

于 2011-11-24T05:51:09.470 に答える
0

fixed div中に入れることができfill divます。

<div id="container">
    <div>Fill
        <div>Fixed</div>
    </div>
</div>

CSS

#container{
    position:absolute;
    width:90%;
    height:100px;
    border:3px solid red;
}

#container div{
    height:95%;
    border:3px solid green;
    width:100%;
}

#container div div{
    height:95%; 
    width:100px;
    border:3px solid blue;
    float:right;
}

例： http： //jsfiddle.net/EM8gj/3/

于 2011-11-24T05:26:15.940 に答える
0

次のように位置を設定してみてください。

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="position:absolute; left: 0; top: 0; right: 100px; border: 3 solid green;">Fill</div>
    <div style="position:absolute; top: 0; right: 0; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
于 2011-11-24T05:25:25.240 に答える
0

テーブルスタイルを使用できます。テーブルスタイルとサブアイテムでdivを作成し、それがテーブルセルスタイルであること

ラベル テキスト
于 2015-04-15T05:05:26.253 に答える