web-dev-qa-db-ja.com

行の残りをインラインブロック要素で埋める方法は？

テーブルを使用する代わりに、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>

FIXED WIDTH（パーセント幅ではない）で左の列を生成し、行でTHE REMAINING SPACEを埋めるために拡張する右の列を生成します。とても簡単ですね。さらに、何も「フローティング」されていないため、親コンテナの高さはコンテンツの高さを含むように適切に拡張されます。

-BANTIN RANT-
固定幅のサイドコラムを備えたマルチコラムレイアウトの「明確な修正」と「聖杯」の実装を見てきましたが、それらはひどく複雑です。要素の順序を逆にしたり、パーセント幅を使用したり、フロートや負のマージンを使用したり、「左」、「右」、「マージン」属性の関係が複雑になります。さらに、レイアウトはサブピクセルに依存するため、1ピクセルの境界線、パディング、またはマージンを追加してもレイアウト全体が破損し、列全体が次の行に折り返されます。たとえば、各要素の幅を25％に設定して1行に4つの要素を配置するなど、単純な操作をしようとしても、丸め誤差は問題です。
-END RANT-

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

csslayoutfixed-width
170
Triynko

参照：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つのミラーを次に示します。

167
thirtydot

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

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

50
Panu Horsmalahti

一般的な最新のブラウザ（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>
42
Frosty Z

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

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

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

2
SuperIRis

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

1
Владислав Ковеченков

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

インラインブロックを放棄するとき

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

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

0
Fanky