在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%; }