在CSS和HTML中實現多列布局的最佳方法是什么？

Question

我在HTML中有問題。 我將HTML頁面分為兩列：

我的代碼：

<div id="outer">      
  <div id="inner1">
    <div id="data1">
    </div>
    <div id="response">
    </div>
  </div>

  <div id="inner2">
    <div id="data2">
    </div>
  </div>
</div>

我的CSS：

#outer {
     background-color:#FFFF99;           
}
#inner1 {
     float: left;
     width: 62%;
}
#inner2 {
     float: right; 
     width: 38%;
}   

我需要在inner1和inner2之間插入另一列#inner1_2 ，這是可選列。

還有第三列：

<div id="#inner1_2">
</div>

這里的問題是變量除法。 根據數據，我有三列還是兩列：

• inner2是固定的
• 如果有三列數據， .inner1需要將.inner1分為兩半，否則.inner1保持原樣。

這比我在CSS中不適應的邏輯更為復雜。

處理此問題的最佳方法是什么？

Answer 1

將一個類添加到外部div，以控制內部div的顯示方式。 將類設置為“ twoColumn”將隱藏中間列，而將類設置為“ threeColumn”將顯示中間列：

<div id="outer" class="twoColumn">
   <div id="inner1">
      <div id="data1">
      </div>
      <div id="response">
      </div>
   </div>
   <div id="inner1_2">
   </div>
   <div id="inner2">
      <div id="data2">
      </div>
   </div>
</div>

CSS：

#outer { background-color: #FF9; }
#inner1 { float: left; }
#inner1_2 { float: left; }
#inner2 { float: left; width: 38%; }
.twoColumn #inner1 { width: 62% }
.twoColumn #inner1_2 { display: none; }
.threeColumn #inner1 { width: 31%; }
.threeColumn #inner1_2 { width: 31%; }