我的 CSS 砌體根本不作業。到目前為止，我已經看到數百個網站告訴如何做到這一點，但其中一個根本不起作用。我已經嘗試解決這個問題大約一個星期了，我非常感謝幫助。
資訊
使用 HTML 和 CSS。通過 Django（在 Python 中）為砌體中的專案加載內容。
約束
雖然這并不是真正的限制，但首選無 JS 解決方案。但是，如果除了用 Javascript 調整某些東西之外別無他法，那也沒關系。
描述
所以，問題來了：flex-wrap根本沒有將 flex 元素包裝到下一行。這一切都在一條直線上并溢位x軸上的頁面。如果都在一條直線上，就不需要砌石了。
這是我從這里使用的 CSS ：
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
height: 600px;
}
.item {
width: 32%;
margin-bottom: 2%;
}
.item:nth-child(3n 1) { order: 1; }
.item:nth-child(3n 2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* Force new columns */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
HTML：
{% for book in books %}
<div class="item" style="width: {{ size.width }}px; height: min-content;">
<img src="{{ book.thumbnail.url }}" style="width: {{ size.width }}px; height: {{ size.height }}px;">
<div class="titlebox"><h3>{{ book }}</h3></div>
<div class="authorbox">{{ book.author }}</div>
<div class="clickbtndiv">
{% if book.status == 1 %}
<a href="/main/rent/{{ book.code }}"><button class="clickbtn">Rent</button></a>
{% else %}
<button class="clickbtn" style="width: auto !important;" onclick="Alert.render('')">Not available</button>
{% endif %}
<a href="/main/books/{{ book.code }}/" style="margin-left: 10px;"><button class="clickbtn">Know more</button></a>
</div>
</div>
{% endfor %}
如果您正在閱讀此問題，您可能是前端開發人員，而且您可能不了解 Django。在{{}}小號會被替換成其從后端發送實際值。
我不知道發生了什么，自從早上 7 點以來我在這里所做的任何事情都無法解決它，因為盡管我知道 HTML、CSS 和 JS，但我更像是一名后端開發人員，而這只是我的一種專案正在努力，所以沒有前端開發人員可以幫助我。
謝謝！
uj5u.com熱心網友回復：
它不適用于 flex。你應該使用網格。 https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
flex 僅適用于 x 或 y 軸。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/405609.html
標籤：
上一篇：JS中的錯誤“UncaughtTypeError:Cannotsetpropertiesofnull(setting'innerHTML')atcall.html:10:58”