200

テーブルを使用する代わりに、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 (パーセンテージ幅ではない)の左側の列と、行の残りのスペースを埋めるために拡張される右側の列が生成されます。かなり単純に聞こえますよね？さらに、何も「フローティング」されていないため、親コンテナーの高さは、コンテンツの高さを包含するように適切に拡張されます。

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

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

4

7 に答える 7

175

参照: 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>

なぜonに置き換えmargin-left: 100pxたのですか?overflow: hidden.right

于 2011-04-07T20:57:53.737 に答える
70

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

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

于 2015-05-29T10:12:34.673 に答える
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/

于 2014-09-26T19:15:27.730 に答える