インラインブロック要素を行の残りの部分に埋め込むにはどうすればよいですか?
そのようなことは、テーブルを使用する代わりに、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"のように設定することは機能する場合がありますが、幅プロパティでの計算の実行は実際にはサポートされていません。