HTML列布局 - 自動換行DIV元素下一列

的HTML佈局如果我有6個項目（即申報單），我想包裝第六元素在第1行的第2列我嘗試了以下方法，但無法獲得下一列中的第六個元素。

enter image description here

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>

JSFiddle Demo

更新：的問題是，項目需要有一個靈活的寬度，在這裏看到：https://dl.dropboxusercontent.com/u/1771956/float_html2.png

來源

2014-06-11 Christian Anchor Dampf

做什麼？ – csanonymus

這裏是我的解決辦法DEMO HTML

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

CSS

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

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

來源

2014-06-11 11:20:40

如果古老的瀏覽器的支持是不是一個問題，你可以利用css3 flexible box。

<div id='container'> 
<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> 

#container{ 
    display:flex; 
    flex-direction:column; 
    align-content:flex-start; 
    flex-wrap:wrap; 
    height:500px; 
    background:hotpink; 
} 
#container div{ 
    display:inline-block; 
    width:100px; 
    height:100px; 
    background-color:gray; 
} 
.wrap { 
    display: inline; 
    background-color:red; 
}

JSFiddle

這不是一個完整的解決方案，希望你可以根據自己的需要調整它

更多關於CSS柔性@css tricks

來源

2014-06-11 11:20:49

我也考慮過列方法。但寬度需要靈活。我的例子應該如何看起來可能太少了。這裏有一個更詳細的佈局示例：https：//dl.dropboxusercontent.com/u/1771956/float_html2.png –

去背一些年來， 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>

來源

2014-06-11 11:38:34 oHoodie

固定它

我使用了一些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

來源

2014-06-12 12:26:45

HTML列布局 - 自動換行DIV元素下一列

回答

相關問題