Столбцы гибкой ширины

#html #css

#HTML #css

Вопрос:

Просто нужно, скажем, 3 столбца [будет изменяться — может быть до 4], которые имеют гибкую ширину (заполняют экран).

Есть ли способ сделать это с помощью CSS? Итак, как три блока, выстроенных горизонтально, заполняют экран.

Ответ №1:

Ваш вопрос немного расплывчатый. Однако простым решением является:

ОТРЕДАКТИРОВАНО: Да, забыл информацию о моем позиционировании.

HTML

 <div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

CSS

 html, body {
   height: 100%;
   position: relative; 
}

.c1 {
   height: 100%;
   width: 33.3%;
   position: absolute;
   left: 0;
   top: 0;
}

.c2 {
   height: 100%;
   width: 33.3%;
   position: absolute;
   left: 33.3%;
   top: 0;
}

.c3 {
   height: 100%;
   width: 33.3%;
   position: absolute;
   left: 66.6%;
   top: 0;
}

Примечание: существуют различные способы сделать это. Могут использоваться значения с плавающей точкой, встроенный блок и т.д.

Ответ №2:

Существует также плагин jQuery Layout, который может соответствовать вашим потребностям, хотя это больше, чем CSS:

http://layout.jquery-dev.net/demos/accordion.html

Ответ №3:

уверен, что вы можете,

 <style>
.column1 {
  float: left;
  width: 33%;
  height: 100%;
}

.column2 {
  float: left;
  width: 33%;
  height: 100%;
}

.column3 {
  float: left;
  width: 33%;
  height: 100%;
}

</style>

<div class="column1">
  Col1 content
</div>
<div class="column2">
  Col2 content
</div>
<div class="column3">
  Col3 content
</div>

вы можете указать одинаковую высоту, если хотите, чтобы они были одинаковыми.