使用CSS自動切換兩列和一列布局

我有一個簡單的兩列布局，寬度固定。使用CSS自動切換兩列和一列布局

<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？

edit：changed＃column1 width。例如有一個錯誤，添加div ontop。

來源

2012-11-13 boadescriptor

您需要檢查某處是否存在第二列。您可以通過JS實現，但也可以在您的模板中執行此操作，然後在BODY標籤中寫入相應的CSS類（例如'layout-two-col'）。看看WordPress的默認主題，那些是以這種方式構建的。 – feeela

什麼情況下'column2'是空的？ –

如果元素的順序相反，這實際上更容易。

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

#column2 + #column1 { width: 10em }

如果他們必須留在爲了你指定，然後使用該表顯示屬性將做到這一點（不包括＃COLUMN1圍繞＃COLUMN2流動時＃COLUMN2較短）：

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

注意這些解決方案僅涵蓋＃column2不在那裏的情況。如果要查看元素是否爲空（或不爲空），則需要使用鏈接:not：#column2:not(:empty)（這可能不是確切的語法）的僞類。

編輯：其他選項可以包括查看＃column1是否應該是最後/第一個孩子（#column1:first-child/#column1:last-child）的唯一子女（#column1:only-child）或第一個/最後一個孩子。

來源

2012-11-13 13:00:14 cimmanon

爲什麼它們必須以相反的順序？ – boadescriptor

「+」選擇器只能在一個方向上工作。您可以選擇一個跟隨特定元素的元素，但不能選擇特定元素之前的元素。 – cimmanon

非常優雅的解決方案 –

如果未定義的話，Div的寬度將回落到100％的寬度。所以我如下將其設置：

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

你將不得不確保<div id="column2">..</div>不會盡管當它不存在neccesary。

來源

2012-11-13 12:38:01

如果＃column2短於＃column1，＃column1將在＃column2周圍流動。大多數情況下，您不希望這種行爲適用於2列布局。 – cimmanon

如果我將＃column1的寬度設置爲auto，並且第一列的內容是一個短句子，則＃column1將僅擴展到句子的寬度，而不是100％。 – boadescriptor

嘗試添加最小寬度：10em到第1列 –

使用CSS自動切換兩列和一列布局

回答

相關問題