2

CSSとテーブルを使用する利点を理解しようとしていますが、これまでのところ確信が持てません。テーブルを使って1分以内にできることは、CSSではそれほど簡単ではないようです（少なくとも現時点では）。したがって、この質問は、CSSとテーブルを使用するメリットについてではありません。CSSで次のことを行う方法を知る必要があります。

たとえば、私には、いわば2つの列に分ける必要がある包含要素があります。

<div id="idOuter">
 <div id="idLeft"></div>
 <div id="idRight"></div>
<div>

idLeft要素は固定幅である必要があります。たとえば、100px。余白のあるテキストラベルが含まれます。ただし、idRightは、idOuterdivに残っている幅を占有する必要があります。余白のあるテキスト入力要素が含まれます。idOuterは、idLeftとidRightの両方の高さも反映し、独自のマージンを持つ必要があります。

それで、どうやってそれをしますか？フロートとインラインブロックと幅をいじり続けますが、ブラウザウィンドウのサイズを変更すると、常にめちゃくちゃになりますか？

4

2 に答える 2

2

比較的簡単です - http://jsfiddle.net/bWuQB/5/

#idOuter {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#idLeft {
    height: 100%;
    width: 100px;
    background: orange;
    position: absolute;
}

#idRight {
    margin-left: 100px;
    height: 100%;
    background: beige;
}

また、レイアウトなどにテーブルを使用することを忘れる必要がありますが、表形式のデータは除きます。テーブルのないレイアウトに慣れると、気に入っていただけるでしょう。そして意味的には正しい解決策です。

編集: 不要な float ステートメントを削除し、Fiddle を更新しました

于 2012-06-15T18:51:38.013 に答える
0

私が見た限り（そして私がいくつか調べた限り）、最良の実装（javascript を使用しない）は、フロートとマージンの組み合わせを使用して、希望する固定流体レイアウトを実現します。ただし、この実装でも、含まれている div は適切な高さを 100% 反映しません。

フィドルのデモンストレーション

[ソース]

于 2012-06-15T22:27:34.327 に答える