вопрос размещения div

Question

У меня есть контейнер div, который будет содержать 3 или более div

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div> 

Теперь я хочу разместить div как

[container-div]
   [1st div]      [2nd div]      [3rd div]
   [4th div]      [5th div] 
[/container-div]

Как добиться следующего?

Спасибо

Answer 1

Если вы всегда хотите 3 деления подряд, вы можете добавить к ним класс и стилизовать их следующим образом:

.float {
    float: left;
    width: 33%;
}

Если вы хотите иметь поля, вы должны отметить их также в% и вычесть поле из ширины.

Answer 2

Три способа, о которых я могу думать.

Во-первых, вы можете использовать float, чтобы установить их положение (style = 'float: left / right'). Однако это заставит их переполнить содержащийся div, если вы не последуете за ними с другим div с clear: обоими (<div style='clear:both'></div>), как показано Anish.

Во-вторых, вы можете использовать таблицу или таблицу свойств отображения, строку таблицы и ячейку таблицы. например:

<div style='display:table'>
  <div style='display:table-row'>
    <div style='display:table-cell'>div 1</div>
    <div style='display:table-cell'>div 2</div>
    <div style='display:table-cell'>div 3</div>
  </div>
</div>

И, наконец, вы можете использовать свойство display inline-block, которое удаляет разрыв строки в конце div, позволяя вам сохранять фиксированную ширину. например:

<div style='display:inline-block;width:33%'>div 1</div>
<div style='display:inline-block;width:33%'>div 2</div>
<div style='display:inline-block;width:33%'>div 3</div>
<br />
<div style='display:inline-block;width:33%'>div 4</div>
<div style='display:inline-block;width:33%'>div 5</div>

Answer 3

<style type="text/css">
#one,#two,#three,#four,#five{
float:left;
}

.clearfix{
clear:both;
}

</style>

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div class="clearfix"></div>
  <div id="four"></div>
  <div id="five"></div>
</div>

просто попробуйте