以3列格式浮動可變高度的div列表

-2

我有一個產品div列表，其中包含兩個更多的div，每個div都垂直顯示 - 頂部包含圖像和底部的一個文本。文本的大小是可變的，所以外部div的大小也是可變的。這些外部div向左浮動並且一直移動3，直到出現長文本的div，然後緊接着該列開始下一行，留下空隙。以3列格式浮動可變高度的div列表

因此，如果我有一行第二個div有3行文本到另外兩個1，第四個div將不在下一行的第一個位置，而是在第3個位置。

這裏是一個形象展示什麼，我現在看到VS第二，我想怎樣做：

而且是我的目標做

來源

2017-09-10 user1561108

請勿使用浮動。看看這個小提琴：

JSFiddle Demo

CSS：

.block { 
    width: 33.33%; 
    display: inline-block; 
    vertical-align: top; 
    margin-right: -3px; 
} 

.inner { 
    min-height: 100px; 
    margin-bottom: 10px; 
    background: #000; 
}

來源

2017-09-10 12:38:10

你可以爲div元素創建一排，這會產生你需要的佈局！我還提供了一個CSS only解決方案，其中類clearfix將執行與row類相同的操作！

CSS3：

.row{ 
 
    display:flex; 
 
} 
 
.box{ 
 
    background-color:grey; 
 
    float:left; 
 
    margin:3px; 
 
    width:100px; 
 
    height:100px; 
 
}

<div class="row"> 
 
    <div class="box">1</div> 
 
    <div class="box" style="height:200px;">2</div> 
 
    <div class="box">3</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="box">4</div> 
 
    <div class="box">5</div> 
 
    <div class="box">6</div> 
 
</div>

CSS：

.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
* html .clearfix    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */ 
 

 
.box{ 
 
    background-color:grey; 
 
    float:left; 
 
    margin:3px; 
 
    width:100px; 
 
    height:100px; 
 
}

<div class="clearfix"> 
 
    <div class="box">1</div> 
 
    <div class="box" style="height:200px;">2</div> 
 
    <div class="box">3</div> 
 
</div> 
 
<div class="clearfix"> 
 
    <div class="box">4</div> 
 
    <div class="box">5</div> 
 
    <div class="box">6</div> 
 
</div>

來源

2017-09-10 12:30:38

由於這是非常明確的。實際上，我沒有'行'div層，因爲每個列的數量取決於可用的總寬度，例如，它在移動設備上是3，但在桌面上更多。沒有額外的行層可以做到這個'clearfix'嗎？ – user1561108

@ user1561108有一個名爲'Bootstrap'的真棒庫，它可以輕鬆地完成所有的工作，降低開發時間！你可以請結帳一個視頻系列bootstrap，我會推薦[Derek Banas Bootstrap教程]（https://www.youtube.com/watch?v=aTLRdrRQyN4），它會真的幫助你！ –

我以前使用過引導程序，但是究竟是什麼使用CSS會讓我放棄額外的div層來獲取上面發佈的內容？ – user1561108

HTML

<div class="flex-container"> 
<div class="box">img</div> 
<div class="box">img</div> 
<div class="box">img</div> 
</div> 
<div class="flex-container"> 
<div class="box">txt</div> 
<div class="box">txt</div> 
<div class="box">txt</div> 
</div>

CSS

.flex-container{ 
background:red; 
display:flex; 
width:100%; 
height:auto; 
margin:0% auto; 
padding:1% 0; 
} 
.box{ 
min-width:100px; 
height:auto; 
padding:1%; 
margin:0 1%; 
flex-grow:1; 
background:green; 
}

另外，請再檢查一下你是否已經清除了所有彩車

請參閱Using CSS Flexible Boxes MDNweb docs

來源

2017-09-10 13:13:14

以3列格式浮動可變高度的div列表

回答

相關問題