我有一個包含影像 url 的陣列串列。我想使用 react-bootstrap 將每個專案系結到一個 div（庫不受約束，但它應該與 react 兼容）。我想以一種方式對齊 div，在每一行中我將只有 3 個影像，如果集合中有第 4 個專案，則它會滑動到下一行。
下面是合集
const images = [
{
src:
'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs=',
width: 1500,
height: 1000,
},
{
src:
'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs=',
width: 666,
height: 1000,
},
{
src:
'https://images.unsplash.com/photo-1491146179969-d674118945ff?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs=',
width: 1500,
height: 844,
},
{
src:
'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs=',
width: 1500,
height: 1000,
},
{
src:
'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs=',
width: 666,
height: 1000,
}
]
uj5u.com熱心網友回復：
我會用 display: flex 制作一個包裝 Div。
<div id="img-wrapper">
<div><img src="your image" /></div>
<div><img src="your image" /></div>
</div>
CSS：
#img-wrapper {
display: flex;
flex-wrap: wrap;
}
#img-wrapper > div {
flex: 0 1 33%;
}
flex: 告訴 child-div 它是否應該增長、收縮以及它應該具有的大小：
彈性：“彈性增長”“彈性收縮”“彈性基礎”；
編輯：正如 Baruch Mashasha 所說，網格會更好。
uj5u.com熱心網友回復：
將所有影像放入容器并使用網格
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 10px;
}
img {
width: 200px;
height: 200px;
}
uj5u.com熱心網友回復：
我會使用 Bootstrap 類為此創建一個網格，就像這樣......
<div className="row">
<div className="col"></div>
<div className="col"></div>
<div className="col"></div>
</div>
如果你想要另一排，你可以繼續這個想法。您可以在此處查看：https : //getbootstrap.com/docs/4.0/layout/grid/以獲得更詳盡的解釋，并根據您的喜好進行自定義。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/344145.html
標籤：javascript html 反应 用户界面
上一篇：在螢屏底部發送訊息文本欄位