dynamic 1-2-3 column layout

Question

私は動的3列レイアウトを作成する方法を探していますが、左側の列がemtpyの場合は、コンテンツと右側の列が広くなります。 joomlaテンプレートのように、左の位置にモジュールを置かないと展開します。

Answer 1

ページコンテンツに基づいて表示される別のページテンプレートを使用する必要があります。または、ページの読み込み後にjavascriptを使用してもかまいませんが、推奨しません。 カラムが空の場合、Joomlaは別のテンプレートを表示します。 （空：「動的」列の幅を持っている

別のオプションは、テーブルを使用しているが、あなたはエルを使用して空の要素の兄弟を選択するようにCSSを使用してみてください

Answer 2

:-)そこに行きたくありません空の要素）とel〜el（一般的な兄弟）セレクタ。

たとえば、このコードは3列のレイアウトを設定し、空の左の列の兄弟を選択し、幅を調整します。

は、あなたがそれをさらに容易にするだろうと各列のクラスを持っているが、これは基本的な考え方である場合：

<div class="wrapper"> 
    <div class="column"><!--This needs to be completely empty for the solution to work --></div> 
    <div class="column"> 
     Content 
    </div> 
    <div class="column"> 
     Content 
    </div> 
</div> 

のマークアップのための

.wrapper { 
    zoom: 1; 
    width: 90%; 
    height: 90%; 
    position: absolute; 
} 
.wrapper:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 
.column { 
    width: 32%; 
    height: 100%; 
    float: left; 
    margin: 0 0.66% 
} 
.column:empty { 
    width: 0%; 
    border: none; 
    margin: 0; 
} 
.column:empty ~ .column { 
    width: 48%; 
    margin: 0 0.98%; 
} 

をちょうどあなたの場合があることに注意してください空の要素に空白文字がある場合、空として登録されません。例：

<div class="column"> 
</div>