Каков наилучший способ создания многостолбцовой разметки в 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_2 между inner1 и inner2, который является необязательным.

Существует также третий столбец:

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

Проблема здесь в разделении переменных. Либо у меня есть три столбца или два столбца в зависимости от данных:

• inner2 является фиксированным
• Если имеется три столбца данных, .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%; }