HTML列布局 - 自动将div元素包装到下一列

Question

我想要一个最多5行的HTML布局

如果我有6个项目（即div）我想将第6个元素包装在第1行的第2列中，我尝试了以下内容，但是无法在下一列中获得第6个元素。

p {
	display: inline-block;
	background-color:gray;
}

.wrap {
	display: inline;
	background-color:red;
}

<div>
	<div><p>I am bla</p></div>
	<div><p>Your mom</p></div>
	<div><p>Test</p></div>
	<div><p>Teddy</p></div>
	<div><p>James</p></div>
	<div><p class="wrap">John Appleseed</p></div>
</div>

更新：问题是项目需要具有灵活的宽度，请参见此处：https://dl.dropboxusercontent.com/u/1771956/float_html2.png

Answer 1

回过头几年，Html布局通常是完全使用table元素构建的，今天大多数布局都没有。但是，您似乎希望您的布局像表格一样（行，列......），所以我会毫不犹豫地使用表格。

<table>
  <tr>
    <td>row 1 column 1</td>
    <td>row 1 column 2</td>
  </tr>
  <tr>
    <td>row 2 column 1</td>
  </tr>
  <tr>
    <td>row 3 column 1</td>
  </tr>
  <tr>
    <td>row 4 column 1</td>
  </tr>
  <tr>
    <td>row 5 column 1</td>
  </tr>

</table>

Answer 2

如果古老的浏览器支持不是问题，您可以使用css3 flexible box。

#container{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-align-content:flex-start;
    align-content:flex-start;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    height:500px;
    background:hotpink;
}
#container div{
    display:inline-block;
    width:90px;
    height:90px;
    margin:5px;
	background-color:gray;
}

.wrap {
	display: inline;
	background-color:red;
}

<div id='container'>
    <div><p>I am blah</p></div>
    <div><p>Your mom</p></div>
    <div><p>Test</p></div>
    <div><p>Teddy</p></div>
    <div><p>James</p></div>
    <div><p class="wrap">John Appleseed</p></div>
</div>

这不是一个完整的解决方案，希望您可以根据自己的需要进行调整

更多关于css flex @ css tricks的信息

Answer 3

固定它

我使用了一些javascript和绝对位置来计算布局

$(function () {
// Handler for .ready() called.
var rows = 5
var items = $("#container").children()
var firstDiv = $("#container").children().eq(0)
var height = firstDiv.height()
var margin_bottom = firstDiv.outerHeight(true) - firstDiv.innerHeight()
var margin_right = firstDiv.outerWidth(true) - firstDiv.innerWidth()
var row = 0
var index = 0

items.each(function () {

    var leftPos = 0
    if (index >= rows) {
        var siblingDiv = $("#container").children().eq(index-rows)
        if (index == 10) {
        }
        leftPos = siblingDiv.width() + siblingDiv.position().left + margin_right
    }
    var topPos = ((height + margin_bottom) * row)

    $(this).css('top', topPos + 'px')
    $(this).css('left', leftPos + 'px')
    row += 1
    index += 1
    if (row >= rows) {
        row = 0
    }
})
});


#container {
background-color:gray;
position:relative;
top: 10px;
left:0px;
height:500px;
}
.item {
background-color:green;
position:absolute;
height:50px;
top: 0px;
left:0px;
margin-right:10px;
margin-bottom:10px;
}

JSFiddle Demo

Answer 4

这是我的解决方案：

p {
	display: inline-block;
	background-color:gray;
}

.wrap {
	display: inline-block;
	background-color:red;
}
div {
    float:left;
}
.clr {
    clear:both;
}

<div>
	<div><p>I am bla</p></div>
    <div class="clr"></div>
	<div><p>Your mom</p></div>
    <div class="clr"></div>
	<div><p>Test</p></div>
    <div class="clr"></div>
	<div><p>Teddy</p></div>
    <div class="clr"></div>
	<div><p>James</p></div>
</div>
<div><p class="wrap">John Appleseed</p></div>