web-dev-qa-db-ja.com

2つのdivが横に並んでいる場合、正しいdivの塗り幅を100％にする方法は？

これを行うための最善の方法は何ですか？.

3つのdivsがあります：

  • div#container with width=100%; 2つの内部divsを保持します

  • div#inner_leftwidthは動的に変化しますが、幅は200ピクセル以下です（製品イメージを保持します）

  • div#inner_rightコンテナ内の残りのスペースを幅で埋める場所（表示される製品を説明するテキストが含まれます）

    #container {
   width:100%
}

#inner_left {
    display:inline-block:
    max-width:200px;
}

#inner_right {
    display:inline-block;
    width:100%; 
}

問題は、div#inner_rightは、改行を作成し、幅全体を埋めます。どうすればそれらを隣り合わせに配置でき、右側のdivは左側のdiv（動的に変化しますか？）が取る幅を考慮します。私はこれを他の方法で動作させることができましたが、きれいな解決策を探しています...

CSS noobのヘルプは大歓迎です！

htmlfillalignmentcss
41
thedeepfield

" liquid layouts "を見て、あなたが話していることを説明できます。

おそらく this one を探しているでしょう。

例では、ディスプレイをインラインに設定してみてください。ただし、技術的にブロックレベルの要素を使用することはできないため、上記のリンクをご覧ください。 :)

Floatを使用している場合に幅を100％に設定することの問題は、コンテナの100％と見なされることです。100％には左のdivの幅が含まれるため、動作しません。

Edit： ここ は他の回答の例です。この例のhtml/cssを含めるように編集しました簡単にするために上のサイト。

以下にも記載します。

[〜＃〜] html [〜＃〜]

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

[〜＃〜] css [〜＃〜]

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
17
Richard Marskell - Drackir

私はここの答えで良い解決策を見たことはありません。だから私は私のものを共有します。

これを行う最良の方法は、CSSでtable-cellオプションを使用することです。追加する1つの重要なことは、ピクセル幅を持つ要素の「最小幅」です。

例：

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS：

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}
64
w00

これは、CSS3で導入されたFlex-Boxを使用して実現でき、 に従って使用できます はクロスブラウザです。

.container { 
  display: flex; 
}

.left {
  width: 100px; /* or leave it undefined */
}

.right { 
  flex-grow: 1;
}

/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">

  <div class="left">100px</div>
  <div class="right">Rest</div>
  
</div>
3
arcs

そのため、CSSのみでこれを実行したいのですが、結局はテーブルを使用することになりました...

3
thedeepfield

フローティングを使用：

#container{
width:100%
}

#inner_left{
float:left;
max-width:200px;
}

#inner_right{
float:left;
width:100%; 
}

編集：これを読んでください、それは素敵な小さなガイドです： quirksmode

0
Damien Pirsy

これは@ w00の回答に基づいています。 +1の友人。

私の状況は、ラベルの横にいくつかのアイコンを表示したかったときです。 nowrapが入る場所には流動クラスを使用します。これにより、アイコンが同じ行に表示されます。

.sidebyside-left-fixed, .sidebyside-right-fixed
{
    display: table-cell;
    width: 100%;
}

.sidebyside-left-fluid , .sidebyside-right-fluid
{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}
0
Valamas

これを実現する簡単な方法を次に示しますが、これは非常に頻繁に必要とされるものです。また、非常に古いブラウザを含め、すべてのブラウザで動作することがテストされています（どのブラウザでも動作しない場合はお知らせください）。

サンプルへのリンク： https://jsfiddle.net/collinsethans/jdgduw6a/

HTML部分は次のとおりです。

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

対応するSCSS：

.wrapper {
    position: relative;
}

$left_width: 200px;
.left {
    position: absolute;
    left: 0px;
    width: $left_width;
}
.right {
    margin-left: $left_width;
}

CSSプリプロセッサを使用していない場合は、$ left_widthを値（ここでは200px）に置き換えます。

クレジット：これは http://htmldog.com/examples/pagelayout2/ に基づいています。他にも便利なものがいくつかあります。

0
Ethan

divの両方にposition：absoluteスタイルプロパティを提供する必要があります

0
tristan625