630

たとえば、それぞれが可変幅を持つことができる2列のdivレイアウトが必要です

div {
  float: left;
}

.second {
  background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

「ツリー」divが必要なスペースを埋めた後、「ビュー」divを利用可能な幅全体に拡大したい。

現在、私の 'view' div は、含まれているコンテンツに合わせてサイズ変更されています。両方の div が高さ全体を占める場合も良いでしょう。

重複しない免責事項:

4

21 に答える 21

157

フレックス ボックス (表示: flex) の魔法を発見しました。これを試して：

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

フレックス ボックスは、私が 15 年間 css に望んでいたコントロールを提供してくれます。ついに登場！詳細: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2015-05-28T02:38:29.823 に答える
54

これを実現するには、 CSS Flexbox flex-growプロパティを 使用します。

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}
<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

于 2016-11-06T08:12:21.347 に答える
28

これは、テーブルを扱うのは些細なことであり、CSS を扱うのは (不可能ではないにしても、少なくともクロスブラウザーの意味では) 難しいことの良い例です。

両方の列が固定幅の場合、これは簡単です。

列の 1 つが固定幅の場合、これは少し難しくなりますが、完全に実行可能です。

両方の列が可変幅の場合、私見では、2列のテーブルを使用するだけで済みます。

于 2009-08-11T12:49:59.823 に答える
23

使用calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

これに関する問題は、値 (px と em は問題なく動作) または明示的に定義されたもののパーセントとして、すべての幅を明示的に定義する必要があることです。

于 2016-03-09T06:53:06.330 に答える
22

このソリューションをチェックしてください

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

于 2014-01-13T16:22:50.317 に答える
15

ここで、これは役立つかもしれません...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

于 2009-08-11T13:16:09.620 に答える
8

他の列の幅が固定されている場合、すべての一般的なブラウザーでcalc機能するCSS 関数を使用するのはどうですか:

width: calc(100% - 20px) /* 20px being the first column's width */

このようにして、2 番目の行の幅が計算され (つまり、残りの幅)、それに応じて適用されます。

于 2015-10-30T21:11:24.207 に答える
5

TABLE古いタグを使用してとても簡単な単純なコラムレイアウトのための純粋な CSS ソリューションを見つけるために、なぜ人々が一生懸命働くのか理解できません。

すべてのブラウザにはまだテーブル レイアウト ロジックがあります...おそらく恐竜と呼んでください。

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

クロスブラウザーの互換性に関しても、リスクがはるかに少なくなります。

于 2010-12-09T06:30:21.823 に答える
3 

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>

于 2011-01-19T09:25:12.703 に答える
1

少し異なる実装、

2 つの div パネル (コンテンツ + 追加) が並んでいる場合、存在しないcontent panel場合は展開されextra panelます。

jsfiddle: http://jsfiddle.net/qLTMf/1722/

于 2014-02-06T11:58:40.263 に答える
1

パット - その通りです。だからこそ、このソリューションは「恐竜」と同時代の人々の両方を満足させるでしょう。:)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}
<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

于 2011-06-01T09:17:29.717 に答える
1

これがあなたが期待している答えかどうかはわかりませんが、Tree の幅を 'auto' に、'View' の幅を 100% に設定してみませんか?

于 2009-08-11T12:49:25.517 に答える
0

利用可能な CSS レイアウト フレームワークをご覧ください。Simplまたは、もう少し複雑な Blueprint フレームワークをお勧めします。

Simpl ( simpl.cssファイルを 1 つだけインポートする必要がある) を使用している場合は、次のようにすることができます。

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

、50-50 レイアウトの場合、または :

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

、25-75 の場合。

それはとても簡単です。

于 2009-08-11T13:11:48.190 に答える
0

jQuery $(document).ready() から呼び出す JavaScript 関数を作成しました。これにより、親 div のすべての子が解析され、最も右側の子のみが更新されます。

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

JavaScript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}
于 2017-03-11T04:43:43.633 に答える
0

Simpl.cssのプラグインありがとうございます！

ColumnWrapperすべての列をそのようにラップすることを忘れないでください。

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

私は Simpl.css のバージョン 1.0 をリリースしようとしているので、言葉を広めるのを手伝ってください!

于 2009-12-13T01:02:11.517 に答える
-6

両方の幅が可変長の場合、スクリプトまたはサーバー側で幅を計算してみませんか?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>
于 2009-08-11T12:52:59.557 に答える