在行數達到2行後停止div移動

Question

我試圖阻止div s在行數達到2 div s之後改變其位置，並且窗口太小而無法顯示它們。我希望他們留在同一個位置，但自己也有問題。

這裏是代碼我：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    background-color: darkgrey; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
html { 
 
    font-family: sans-serif; 
 
} 
 

 
body { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.wrapper { 
 
    overflow: hidden; 
 
    margin: auto; 
 
} 
 

 
div>div { 
 
    margin: 0.5rem; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
div:nth-child(4n) { 
 
    clear: left; 
 
} 
 

 
img { 
 
    width: 320px; 
 
    max-height: 100%; 
 
} 
 

 
.border { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: white; 
 
} 
 

 
.txt { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    left: -8; 
 
    width: 320px; 
 
    position: absolute; 
 
    bottom: -7px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    max-width: 100%; 
 
    color: white; 
 
} 
 

 
@media(max-width: 1024px) { 
 
    div:nth-child(2n + 3) { 
 
    clear: left; 
 
    } 
 
    div:nth-child(4n) { 
 
    clear: none; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 1</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 2</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">Omelette du fromage</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">How you doin?</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 5</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 6</div> 
 
    </div> 
 
</div>

標籤應與它們的佈局點，但他們沒有預覽他們應該。 這裏是鏈接到其他CSS編輯器，更好地做它：http://www.cssdesk.com/7kW7k

Answer 1

用flexb重寫了你的佈局牛和perfored一些風格優化。

假設您希望在行和頁面中的2張圖像縮小時添加滾動條。結果：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
    background-color: darkgrey; 
 
    height: 100vh; 
 
    margin: 0; 
 
    
 
    /* for centering block both horizontally and vertically */ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    /* maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) × 3 */ 
 
    max-width: calc(322px * 3 + 0.5rem * 6); 
 
    /* minimum 2 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) × 2 */ 
 
    min-width: calc(322px * 2 + 0.5rem * 4); 
 
} 
 

 
.wrapper > div { 
 
    margin: 0.5rem; 
 
} 
 

 
img { 
 
    width: 320px; 
 
    max-height: 100%; 
 
} 
 

 
.border { 
 
    border: 1px solid #fff; 
 
    position: relative; 
 
} 
 

 
.txt { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding: 10px 20px; 
 
    color: white; 
 
}

<div class="wrapper"> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 1</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 2</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">Omelette du fromage</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">How you doin?</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 5</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 6</div> 
 
    </div> 
 
</div>

您可以測試jsFiddle調整。

如果你想圖像萎縮，你可以添加媒體查詢本：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
    background-color: darkgrey; 
 
    height: 100vh; 
 
    margin: 0; 
 
    
 
    /* for centering block both horizontally and vertically */ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    /* maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) × 3 */ 
 
    max-width: calc(322px * 3 + 0.5rem * 6); 
 
} 
 

 
.wrapper > div { 
 
    margin: 0.5rem; 
 
} 
 

 
img { 
 
    width: 320px; 
 
    max-height: 100%; 
 
} 
 

 
.border { 
 
    border: 1px solid #fff; 
 
    position: relative; 
 
} 
 

 
.txt { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    padding: 10px 20px; 
 
    color: white; 
 
} 
 

 
@media (max-width: 750px) { 
 
    .border { 
 
    width: calc(50% - 2rem); 
 
    } 
 
    
 
    .border > img { 
 
    width: 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 1</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 2</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">Omelette du fromage</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">How you doin?</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 5</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 6</div> 
 
    </div> 
 
</div>

測試中jsFiddle調整。

Answer 2

我加了一個左屬性，從而設法更好地得到排列：

.txt { 
    background-color: rgba(0, 0, 0, 0.5); 
    width: 320px; 
    position: absolute; 
    bottom: -6px; 
    left: -7px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 10px; 
    padding-bottom: 4px; 
    max-width: 100%; 
    color: white; 
} 

小提琴： https://jsfiddle.net/mjpLmqwx/

Answer 3

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
background-color: darkgrey; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
} 
 
body { 
 
} 
 
.wrapper { 
 
    margin: auto; 
 
    width:100%; 
 

 
} 
 
.txt { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    left: -8; 
 
    width: 320px; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    max-width: 100%; 
 
    color: white; 
 
    margin: 0px; 
 
} 
 
div > div { 
 
    margin: 0.5rem; 
 
} 
 

 

 

 

 
img { 
 
width:100%; 
 
} 
 
.border { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: white; 
 
    width: 47%; 
 
    position: relative; 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 1</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 2</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">Omelette du fromage</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">How you doin?</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 5</div> 
 
    </div> 
 
    <div class="border"> 
 
    <img src="http://i.imgur.com/VCsr2MH.png"> 
 
    <div class="txt">div text 6</div> 
 
    </div> 
 
</div>