我的反應代碼如下：<div className="gridlist"> <div className="card"> {shops.map((shop) => ( <MediaCard card={shop} bname={shop.bname} description={shop.description} /> ))} </div></div>{shops.map((shop) => ( 部分只是從我制作的數據庫中獲取信息，我想以 CSS 磚石格式顯示該信息。 MediaCard組件只是我做的一個組件，保存了一些信息，比如標題、描述、圖片等。我的CSS代碼：/* The Masonry Container */.gridlist { margin: 1.5em auto; max-width: 768px; column-gap: 1.5em; row-gap: 1.5em;}/* The Masonry Brick */.card { padding: 1em; margin: 0 0 1.5em;}/* Masonry on large screens */@media only screen and (min-width: 1024px) { .gridlist { column-count: 2; }}/* Masonry on medium-sized screens */@media only screen and (max-width: 1023px) and (min-width: 768px) { .gridlist { column-count: 2; }}/* Masonry on small screens */@media only screen and (max-width: 767px) and (min-width: 540px) { .gridlist { column-count: 1; }}問題是這樣的：正如你所看到的，一個盒子被切斷了。那么我該如何解決這個問題呢？
1 回答
largeQ
TA貢獻2039條經驗 獲得超8個贊
過了一段時間我終于找到了解決方案。我將 .gridlist className 樣式更改為：
.gridlist {
width: 1500px;
margin: 20px auto;
columns: 4;
column-gap: 40px;
}
我還將 .card className 樣式更改為：
.card {
width: 100%;
margin: 0 0 20px;
padding: 10px;
overflow: hidden;
margin-bottom: 30px;
}
對于我的 MediaCard 組件，我添加了一個 className .MediaCard。然后我將其添加到我的 CSS 中：
.MediaCard {
max-width: 100%;
margin-bottom: 30px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
最后，我添加了一些響應式樣式：
@media (max-width: 1650px) {
.gridlist {
columns: 3;
width: calc(100% - 40px);
box-sizing: border-box;
padding: 20px 20px 20px 0;
}
}
@media (max-width: 768px) {
.gridlist {
columns: 2;
}
}
@media (max-width: 480px) {
.gridlist {
columns: 1;
}
}
但是，我仍然不知道我以前的代碼有什么問題。如果有人能告訴我，謝謝！
- 1 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消