インラインブロック要素を行の残りの部分に埋め込むにはどうすればよいですか？

186

そのようなことは、テーブルを使用する代わりに、CSSと2つのインラインブロック（または何でも）DIVタグを使用して可能ですか？

表のバージョンは次のとおりです（境界線が表示されるように追加されています）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

固定幅（パーセント幅ではない）の左側の列と、行の残りのスペースを埋めるように拡張する右側の列が生成されます。とてもシンプルに聞こえますよね？さらに、何も「フローティング」されていないため、親コンテナの高さはコンテンツの高さを含むように適切に拡張されます。

--BEGIN RANT--
私は、固定幅のサイドカラムを持つマルチカラムレイアウトの「明確な修正」と「聖杯」の実装を見てきましたが、それらは複雑で複雑です。要素の順序を逆にしたり、パーセント幅を使用したり、フロート、負のマージンを使用したり、「左」、「右」、および「マージン」属性間の関係は複雑です。さらに、レイアウトはサブピクセルに対応しているため、ボーダー、パディング、またはマージンを1ピクセルでも追加すると、レイアウト全体が壊れ、列全体が折り返されて次の行に送られます。たとえば、4つの要素を1行に配置し、各要素の幅を25％に設定するなど、単純なことを行おうとしても、丸め誤差は問題になります。
--END RANT--

「inline-block」と「white-space：nowrap;」を使用してみましたが、問題は、2番目の要素で行の残りのスペースを埋められないことです。幅を "width：100％-（LeftColumWidth）px"のように設定することは機能する場合がありますが、幅プロパティでの計算の実行は実際にはサポートされていません。

css layout fixed-width

— トリンコ
ソース

1

これを機能するdisplay: table-*構成に変換する以外にこれを行うための健全な方法はないと思いますが、実際には「よりセマンティック」ではなく（ひどいdivスープの場合）、IE6互換性を壊します。私は個人的に固執するだろう<table>、誰かがなしで動作天才シンプルなアイデアを思い付くことをどうにかしない限り

— ペッカ・

51

うん。私はCSS時代の幕開けからこれらすべての「テーブルを回避する」議論に出くわし続けます。そして、レイアウトにまだテーブルを使用している場合、あなたは無能な怠惰な愚痴のように聞こえるように書かれています。10年早送りしますが、それでも理想的なパイプドリームです。実際のところ、フローレイアウトのセマンティクスは、ユーザーインターフェイスやフォームなどの固定ではあるが柔軟なレイアウトに対応しています。実は、賢い人々は便利な場所でテーブルを使用します。なぜなら、可能なすべてのCSSソリューションを使い果たし、テーブルを使用するよりもすべてが不完全であり、はるかに複雑であることに気付いたからです。

— Triynko

4

フロート？行末の要素が予期せず行を折り返さず、境界線とマージンがレイアウトを壊さない、動作しているコードを見せてください。それが彼らの悪いところです。また、自動サイズの親コンテナは、「明確な修正」ハックなしで浮動要素を含むように適切に拡張されますか？そうは思いませんでした。

— Triynko

親コンテナに少なくとも1つの非フローティング要素がある場合、それは実際にフロートをクリアする「ハック」ではありません。CSSは印刷にルーツがあることに注意してください。なぜ自動クリアされないのかについては、css-tricks.com / containers - dont - clear - floatsを参照してください。

— チャウレット

3

@Triynko：これは私が以前に作成したものです：jsfiddle.net/thirtydot/qx32C-それはあなたのポイントのほとんどに当てはまると思います。私が行ったそのデモに対するあなたの批判を聞いて、後でそれを修正しようとします。

— thirtydot 2011

169

参照： http : //jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}

<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

スニペットを展開

なぜ私は置き換えたのmargin-left: 100pxでoverflow: hidden上の.right？

編集：上記の（デッド）リンクの2つのミラーを次に示します。

— 三十点
ソース

60

自分をWeb開発者と呼ぶ場合は、そのリンクをクリックする必要があります。私はそうしました、そして魔法のカーペットに乗っているジャスミンのように感じました。

— Chris Shouts、

2

@ChrisShouts、これはおそらくこれを説明する最良の方法です。この方法は意味がありませんが、繰り返しますが...明示的に実行できるはずの何かに対する素晴らしい回避策です。

— mjvotaw 2011

14

非表示のオーバーフローは解決策ではありません。適切なコンテナのオーバーフローを非表示にしたくないとします。これにより、適切なコンテナのサイズがラインの残りのスペースを埋めることはありません。これは、満足のいく答えがまだないため、まだ答えをマークしていない2年前の質問の例です。

— Triynko

3

Triynko： 'overflow：hidden'を使用している場合でも、一般的には何も隠されません（少なくともそこにテキストがある場合は）。div内のテキスト/要素は、div内に収まるように配置されます（もちろん、divより大きい要素がない場合）。

— CpnCrunch 2015年

1

@RMorrisey：おそらくいくつかbox-sizing: border-boxのdivs が必要です。あなたが説明する動作を示すデモを提供しなかったので、ただの推測です。そうは言っても、通常、display: tableベースのソリューションの方が優れています。これは非常に古い質問ですが、OPの動作が原因で、この質問のテーブルについては何もしないようにしようとしていたと思います。

— thirtydot 2017

65

フレックスボックスを使用した最新のソリューション：

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}

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

スニペットを展開

http://jsfiddle.net/m5Xz2/100/

— パヌホルスマラハティ
ソース

4

フレックスと幅を100％表示する..覚えて

— おか

10

フレックスを使用するとき、flex: 1代わりに使用しないのはなぜwidth: 100%ですか？

— Itai Bar-Haim 2016年

flexboxを初めて使用する場合：flex: 1はの省略形ですflex-grow: 1。これは組み合わせ属性です：flex: <grow> <shrink> <basis>。

— タニアス2016年

1

表示に関する簡単な注記：flexはIE <11ではサポートされておらず、11では非常にバグが多い

— Eric Shields

1

@EricShieldsこれは、誰もがFlexboxを使用することを妨げるべきではありません。今日私たちはflexbugsあなたを知っています。

— 神経伝達物質

47

一般的な最新のブラウザーと互換性があります（IE 8+）：http ://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}

 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

スニペットを展開

— フロスティZ
ソース

9

テーブルの使用に対する反対論は、その表示特性とは関係ありません。管理できないマークアップ、スタイル/ドキュメントの混乱、不適切なセマンティクスに関係しています。これらの引数はどれもに適用されませんdisplay:table。

— Rich Remer

これはinline-block、行の残りを埋める方法には答えません。

— 神経伝達物質

1

@TranslucentCloud私は私の回答が質問のタイトルに正確に回答するわけではないことに同意しますが、質問の本文で尋ねられるように、divを使用して利用可能な幅を埋める方法を提供します。

— Frosty Z

1

私はこのソリューションがとても好きです。非表示のCSSロジックから発生する奇妙なスタイリングを使用する必要はありません（オーバーフローの非表示など）。

— Chaoste 2018

4

両方の要素のdisplay：inline-blockと共に、fluid要素でcalc（100％-100px）を使用できます。

タグの間にスペースがあってはならないことに注意してください。そうしないと、計算でそのスペースも考慮する必要があります。

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class=“left”></div><div class=“right”></div>

簡単な例：http : //jsfiddle.net/dw689mt4/1/

— SuperIRis
ソース

1

私はflex-growこの目標を達成するためにプロパティを使用しました。あなたは、セットする必要がありますdisplay: flex、あなたが設定する必要があり、親コンテナのためにflex-grow: 1あなたは残りのスペースを埋めるためにしたいブロックのため、または単にflex: 1としてtaniusはコメントで述べました。

— ウラジスラフ・コベチェンコフ
ソース

0

を使用できない場合overflow: hidden（したくないためoverflow: hidden）、またはCSSのハック/回避策が嫌いな場合は、代わりにJavaScriptを使用できます。JavaScriptであるため、うまく機能しない可能性があることに注意してください。

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}

.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}

<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

スニペットを展開

http://jsfiddle.net/ys2eogxm/

— ニック・マニング
ソース

0

インラインブロックをあきらめるとき

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

（CSSフロートから：テキストの左側に画像をフローティング）

— ファンキー
ソース