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个div，你可以为它们添加一个类并按照这样设置它们：

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

如果你想要有边距，你也应该用％来表示它们，并从宽度中减去边距。

Answer 2

<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>

试试吧

Answer 3

我能想到的三种方式。

首先，您可以使用float来设置它们的位置（style ='float：left / right'）。但是，这会导致它们溢出包含的div，除非你使用另一个带有clear的div：{（{1}}），如Anish所示。

其次，您可以使用表或显示属性表，表行和表单元格。 e.g：

<div style='clear:both'></div>

最后，您可以使用display属性inline-block，它会删除div末尾的换行符，同时允许您保持固定宽度。 e.g：

<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>

div放置问题

3 个答案: