Question

我正在开发一个响应式网页设计，将div放置在正确的位置，但是分为两行。一旦容器div变为两个窄，则tile div将向下移动以形成一个新行。

例如

<div id="container">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>


.tile {
    height:96px;
    width:96px;
 }

在第一行中显示三个div，在第一行下显示另外两个div。

如果重新调整页面大小并且容器对于第一行变为两个窄，则div tile应移动以形成新行。

谢谢！

Answer 1

我认为你正在寻找这个？

.tile {
    height:96px;
    width:96px;
    float: left;
 }

Answer 2

你必须嵌套前3个div和第2个div。你还需要“划分”这两个div，所以他们构建了2行（用css:clear完成）以实现你所假装的：

HTML：

<div id="container">
  <div class="firstrow">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>

<div class="clear"></div>

   <div class="secondrow">
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

的CSS：

.tile {
    height:96px;
    width:96px;
    float:right;
    border: 1px solid red;
 }
.clear{clear:both;}

请参阅此处的示例：http://jsfiddle.net/hbrunar/R59Qe/1/

Answer 3

你应该将“float：left”属性添加到你的class =“tile”中，否则它只会将所有div添加到另一个下面。

感谢。

两行div正好浮动

3 个答案: