552

2列のdivレイアウトが必要です。それぞれのレイアウトの幅を変えることができます。

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

スニペットを展開

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

現在、私の「ビュー」divは、それが含むコンテンツにサイズ変更されています。両方のdivが高さ全体を占める場合も良いでしょう。

免責事項を複製しない：

float：leftが設定されている場合、divを最大幅に拡張します。左側の幅が固定されているためです。
divのヘルプ-divを残りの幅に合わせます

html css multiple-columns

— アヌラグ・ユニヤル
ソース

1

関連するstackoverflow.com/a/22719552/759452

— Adrien Be

1

私は質問を理解していないか、私はそこの両方の幅と高さが不便で固定されているので、あなたが、受け入れられた答えを選ぶ方法を理解していないのどちらかoverflow hidden

— user10089632

1012

これに対する解決策は実際には非常に簡単ですが、まったく明白ではありません。特定の方法でフロートと相互作用する「ブロックフォーマットコンテキスト」（BFC）と呼ばれるものをトリガーする必要があります。

ちょうどその2番目のdivを取り、フロートを削除し、overflow:hidden代わりにそれを与えます。visible以外のオーバーフロー値は、それが設定されているブロックをBFCにします。BFCは、子孫フロートがそれらをエスケープすることを許可しません。また、兄弟/祖先フロートがそれらに侵入することも許可しません。ここでの正味の効果は、フロートdivが機能し、2番目のdivが通常のブロックになり、フロートが占有している幅を除いてすべての利用可能な幅を占めることです。

これは現在のすべてのブラウザーで機能するはずですが、IE6と7でhasLayoutをトリガーする必要があるかもしれません。思い出せません。

デモ：

左を修正：http : //jsfiddle.net/A8zLY/5/
修正済み：http : //jsfiddle.net/A8zLY/2/

— キサンチル
ソース

28

正解です。しかし、「auto以外のオーバーフロー値」でBFCになると言うのは間違いです。つまり、デフォルト（可視）以外のオーバーフロー値はBFCになります。実際、overflow autoも完全に機能します。これは、私がお勧めすることです（そのdivからのぞくような、相対的に配置された要素がある場合に備えて）。

— BT

52

この記事には良い説明があります：colinaarts.com/articles/the-magic-of-overflow-hidden

— Max Cantor

1

コンテンツがdivをオーバーフローするのに十分な大きさである場合はどうなりますか？

— giannis christofakis 2012年

11

子供の順序が重要であることに注意することが重要です。固定幅のフローティングエレメントは、他のフローティングエレメントの上にある必要があります。私が理解するのに時間がかかりすぎた、なぜそれが順序を入れ替えてもうまくいかなかったのか。

— Riplexus

2

私はすべてのものの非可視オーバーフローがここで見つけることができデビッドとボリスによって与えられた回答に基づいて、BFCをトリガーする理由を説明する答えを書いた：stackoverflow.com/questions/9943503/...は私の解釈が正しいましたか？

— BoltClock

105

フレックスボックス（ディスプレイ：フレックス）の魔法を発見しました。これを試して：

<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>

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

— BT
ソース

何を発見したかはわかりませんが、最新のChrome jsfiddle.net/fjb548kw/3

— Yevgeniy Afanasyev

@YevgeniyAfanasyev「float：left;」を削除しました問題を修正します。メモありがとうございます！

— BT

ありがとうございました。flex-grow: 100;代わりに持っている理由を説明していただけますflex-grow: 1;か？

— Yevgeniy Afanasyev

2

@YevgeniyAfanasyev特に理由はありませんが、それが私のやり方です。パーセントで考えることができるので、flex-grow:10＃aを設定してから#bを設定するとflex-grow: 90、＃aはラインの幅の10％、＃bはラインの幅の90％になります。他の要素にフレックス幅スタイルがない場合、技術的には何を配置してもかまいません。

— BT

これは私にとって最も効果的で、入力とボタンを1つのボタンのように並べて配置しようとしました。

— Souleste

29

フレックスボックスソリューション

これが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>

スニペットを展開

注：サポートされているブラウザで必要な場合は、フレックスベンダープレフィックスを追加します。

— レジーピンカム
ソース

27

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

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

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

両方の列が可変幅であるため、IMHOでは2列のテーブルを使用する必要があります。

— クレタス
ソース

11

小型のデバイスで右側の列を左側の下にスライドさせたいレスポンシブデザインでは、テーブルはあまり良くありません。

— S ...

1

テーブルを操作するためのレスポンシブデザイントリックがいくつかあります：css-tricks.com/responsive-data-tables

— Rikki

私は今、2つの個別のレイアウトを完全に設計し、メディアクエリを使用してモバイルで変更する傾向があります。display:none;スライディングスケールで可能な限り100％レスポンシブにする一方で、タッチスクリーンフィールを使用するモバイルの設計を完全に変更する方が良い場合があります。ボタンのスタイル。

— Bysander

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>

スニペットを展開

— angel.dimitrov
ソース

2

オーバーフローを非表示にすることが常に望ましいとは限らないため、これは一般に優れたソリューションです。

— ジョセフレノックス

3

OPごと：「2列のdivレイアウトが必要です。それぞれのレイアウトの幅を変えることができます」。あなたの答えでは、最初の列の幅を知っている必要があるので、それは可変ではありません。両方の列に固定幅を設定して、単にそれらをフロートさせることもできます。

— Jacob Alvarez

17

使用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が正常に機能する）または明示的に定義されたもの自体のパーセントとして明示的に定義される必要があることです。

— ジョエル・モーゼス
ソース

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>

スニペットを展開

— a6hi5h3k
ソース

+1はあなたの例が機能しているように見えるためですが、私の実際のシナリオでは、ツリーdivが100％ではないため、「ビュー」のコンテンツが「ツリー」divにクリープする方法がいくつかあります。コンテンツを見る

— Anurag Uniyal 2009

その場合、左列の最大幅がわかっていれば、uにスタイルの最大幅（IEでは機能しない）を与えるか、margin-left（IEのダブルマージンバグに注意）と考えるか、または左詰め。

— a6hi5h3k 2009

これは素晴らしかったです！：私は、一回限りの解決策として、インラインそれを使用しています<div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>

— ajwest

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>

スニペットを展開

ブラウザー間の互換性の面でもリスクははるかに低くなります。

— PatM
ソース

2

はい、しかしすべてがcssによって行われているのであれば、なぜこれではないのですか？少なくともそれが可能であれば好奇心ですか？

— Anurag Uniyal

2

それはmedia-queries、小さなデバイスで両方の列を上下に配置したい場合、古いtableタグでは不可能だからです。これを機能させるには、CSSテーブルスタイルを適用する必要があります。したがって、現在のところ、CSS任意の画面サイズのレスポンシブレイアウトが必要な場合は、これを解決することをお勧めします。

— ElChiniNet 2017年

5

他の列の幅が固定されている場合は、すべての一般的なブラウザで calc機能するCSS関数を使用してみてください。

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

このようにして、2番目の行の幅が計算され（つまり、残りの幅）、応答して適用されます。

— anit
ソース

これは、たとえばのように、フレックスボックス以外のものを使用する限り、最良の答えですcss-grid。またposition: fixed、すべてに最適な選択で動作します！ありがとうございました！

— Bartekus

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="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

スニペットを展開

— A.Pramod Kumar
ソース

左側に固定アイテム、右側に固定アイテム、残りのスペースをすべて使用する1つのメッセージ行があるステータスバーのようなものが必要です。私はこの答えから始めて、floatsの後にメッセージdivを追加しました：height：20px; 空白：nowrap; オーバーフロー：非表示。text-overflow：clip

— englebart 2017

3

CSSグリッドレイアウトを試すことができます。

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

スニペットを展開

— キヤノン
ソース

2

flex-grow-これは、必要に応じてflexアイテムが成長する機能を定義します。比率として機能する単位のない値を受け入れます。これは、フレックスコンテナー内の使用可能なスペースの量を決定します。

すべてのアイテムでflex-growが1に設定されている場合、コンテナの残りのスペースはすべての子に均等に配分されます。子の1つが値2を持っている場合、残りのスペースは他の子の2倍のスペースを占有します（または少なくとも試行します）。詳細はこちら

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

スニペットを展開

— スタニスラフ・オスタペンコ
ソース

1

少し異なる実装、

2つのdivパネル（コンテンツ+追加）を並べてcontent panel展開するとextra panel存在しないはます。

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

— ラオ
ソース

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>

スニペットを展開

— ジョンマノア
ソース

2

cssクラス.ipのhtml参照はなく、IE7では動作しません

— Keith K

1

これを行うクラスと呼ばれるW3のCSSライブラリを使用できますrest。

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

スニペットを展開

ページのCSSライブラリをリンクすることを忘れないでくださいheader：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

これが公式デモです：W3 School Tryit Editor

— マナー
ソース

それは単に「overflow：hidden」を追加するように見えます。これは、すでに与えられた回答のより悪いバージョンになります

— vpzomtrrfrt

0

これがあなたが期待している答えであるかどうかはわかりませんが、ツリーの幅を「自動」に、「表示」の幅を100％に設定してみませんか？

3

幅が広すぎるため、2番目のフロートが最初のフロートの下に配置されるためです。

— cletus 2009

0

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

Simplを使用している場合（1つのsimpl.cssファイルのみをインポートする必要があります）、これを行うことができます。

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

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

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

、25〜75の場合。

とても簡単です。

両方の列は可変幅になりますか？

— Anurag Uniyal 2009

0

Simpl.cssのプラグインをありがとう！

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

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

Simpl.cssのバージョン1.0をリリースしようとしています。

— シャギー
ソース

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"));
            }
        });
    });
}

— bcr666
ソース

0

これはflexboxを使用するとかなり簡単です。以下のスニペットをご覧ください。フローを制御し、グローバルな高さを設定するラッパーコンテナーを追加しました。要素を識別するために境界線も追加されました。divは、必要に応じて、完全な高さまで拡張されることに注意してください。ベンダープレフィックスはまだ完全にサポートされていないため、実際のシナリオではフレックスボックスに使用する必要があります。

フレックスボックスを使用してレイアウトを理解および設計するための無料ツールを開発しました。こちらで確認してください：http : //algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

スニペットを展開

— マリオ・バスケス
ソース

あなたの答えを追加する前に、以前の答えをすべて読みましたか？それはないようです...

— Temani Afif '12 / 08/12

補足として、stretchこれはデフォルト値であり、子要素をflexコンテナにする必要がないため、追加する必要はありません。display:flex内部要素には役に立たない

— Temani Afif

コメントがないのに、なぜ反対票なのかしら。この答えは質問に答えていませんか？どうして？他の人を助けようとする試みが罰せられるなら、私は私の次の答えの前に2度考えます

— マリオ・バスケス

1

あなたは反対票の後に2つのコメントを得ました、それは十分ではありませんか？

— Temani Afif 2018

てまり、私のツールをチェックしましたか？あなたは便利で他の人を助けることができると思いませんか？あなたはその質問と関係がないと思いますか？この質問に対するあなたの答えはどこですか？見えない。ここであなたの役割は何ですか？

— マリオバスケス

-3

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

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

<div style="width: <=% getViewWidth() %>">View</div>

— いたずら
ソース

3

サーバーは、クライアントのレイアウトエンジンがどのように機能するかをどのようにして知るのでしょうか。

— ケブ

シンプル：世の中にあるブラウザの90％向けに開発してください:) IE 7 +、FF3 +、SafariはCSS 3をサポートしています。標準のIE6 <！-[if lte IE 6]>要素を含めることもできます。ところで、style = "width：％"をサポートしていないブラウザは？

— amischiefr 2009

サーバー側でどのように実行できるかわかりませんが、はい、一部のJAVAScriptで実行できますが、css / htmlで実行できない場合を除きます

— Anurag Uniyal 2009

それはできません。したがって、両方を動的にしたい場合は、スクリプトまたはサーバー側で行う必要があります。

— amischiefr 2009

残りの幅を埋めるためにdivを展開します

フレックスボックスソリューション