0

幅が固定された単純な 2 列のレイアウトがあります。

<div id='box'>
    <div id='ontop'>Ontop</div>
    <div id='column1'>Column1</div>
    <div id='column2'>Column1</div>
</div>

CSS:

#box { width: 20em; }
#column1 {width: 12em;}
#column2 {float: left; width: 8em;}

空または存在しないcolumn1場合は「100％」に展開したいと思います。column2

CSSだけでJavascriptなしでこれを行うことは可能ですか?

編集: #column1 の幅を変更しました。例にエラーがあり、上に div を追加しました。

4

2 に答える 2

4

要素の順序が逆の場合、これは実際には簡単です。

<div id='box'>
    <div id='column2'></div>
    <div id='column1'></div>
</div>

#column2 + #column1 { width: 10em }

指定した順序のままにしなければならない場合は、テーブル表示プロパティを使用してそれを行います (#column2 が短い場合、#column1 が #column2 の周りを流れることはありません)。

#box { width: 20em; display: table }
#column1, #column2 { display: table-cell }
#column2 { width: 8em; } /* you'll want to add some margin/padding here */

これらの解決策は、#column2 が存在しない場合のみをカバーすることに注意してください。要素が空 (または空でない) かどうかを確認したい場合は、: でチェーンされた疑似クラスを使用する必要があります( :emptyこれは正確な構文ではない可能性があります)。:not#column2:not(:empty)

編集: 他のオプションには、 #column1 が唯一の子 ( #column1:only-child) であるか、最後の/最初の子 ( #column1:first-child/ #column1:last-child) である必要があるときに最初/最後の子であるかを確認することが含まれます。

于 2012-11-13T13:00:14.797 に答える
0

定義されていない場合、Div は常に 100% の幅に戻ります。だから私は次のように設定します：

#box { width: 20em; }
#column1 {width: auto;}
#column2 {float: left; width: 8em; margin-left: 2em; }

<div id="column2">..</div>必要がない場合でも、存在しないことを確認する必要があります。

于 2012-11-13T12:38:01.600 に答える