如何在行和列样式中放置DIV

Question

我正在研究一种结构，我需要以图像中所示的方式放置div。

具有自动宽度但固定高度，不确定如何实现它，理想的HTML将是

<div class="container">

    <div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>

</div>

Answer 1

<table>
<tr>
<td>
<table width="100%">
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td><div>4</div></td>
<td><div>5</div></td>
<td><div>6</div></td>
</tr>
</table>
</td>
</tr>
</table>

Answer 2

已经构建了许多可供您使用的网格系统。他们中的大多数人都会努力实现你的目标。我喜欢的是Foundation，但还有Bootstrap，960gs，1140px等等。

看看http://www.1140px.com/，看看它是否符合您的需求。虽然您当然可以自己动手，但使用框架可以获得社区的更新，而不必自己维护。

Answer 3

你可以制作一个100％的网格，并在这些框之间将它们分开

.container {
  width:100%;
  background:blue;
}

.box-3 { 
    position: relative;
    display:inline-block;
    min-height: 1px; 
    width: 30%;
    background:red;
}

.box-4 {
    position: relative;
    display:inline-block;
    min-height:1px;
    width:40%;
    background:green;
}

<div class="container">
    <div class="box-3">1</div>
    <div class="box-3">3</div>
    <div class="box-4">5</div>
    <div class="box-3">2</div>
    <div class="box-4">4</div>
    <div class="box-3">6</div>
</div>

Answer 4

您需要一个clearfix来清除样式并重新开始。这个div是不可见的。看看小提琴。在这种情况下，容器将自动调整为内部div的大小。

<div class="container">

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="clearfix"></div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>

</div>

CSS：

.container {
border: 1px solid green;
width: auto;

}
.clearfix:after
{
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.box
{
border: 1px solid black;
display: inline-block;
height: 120px;
width: 120px;
margin: 2px;
}

查看小提琴here