我想修复div宽度(图像)并获取滚动条。但是增加“ div”越多,包装器div区域中div的宽度越小。它不会显示滚动条。
这是下面的图像包装器。
<div className="image-list-wrapper">{imageList}</div>
通过点击带有“ div”的按钮来添加{imageList}
let imageList;
if(images){
imageList = images
.map((image, i) => {
return(
<div key={i} className="image-list-item">
<img className="image-resize" src={`http://localhost:5000`+image}/>
</div>
)
})
}
和CSS(SCSS)
.image-list-wrapper {
margin: auto;
margin-top: 1.5rem;
width: 95%;
height: 12rem;
border: 1px solid #bcbaba;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
}
.image-list-item {
float: left;
width: 9rem;
height: 9rem;
margin: 0.5rem;
margin-top: -0.5rem;
}
.image-resize {
width: 100px;
height: 160px;
}
我在下面的屏幕截图中得到了结果(请忽略其他按钮。)
图像越多,图像越小。
我想要包装器div中的div项具有滚动条和固定宽度。
答案 0 :(得分:0)
您的代码将生成如下内容:
<div class="image-list-wrapper">
<div key="0" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="1" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="2" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="3" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="4" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="5" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="6" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
</div>
,由于使用浮动元素或使用Flexbox,因此应删除左浮动。
.image-list-wrapper {
margin: auto;
margin-top: 1.5rem;
width: 95%;
height: 12rem;
border: 1px solid #bcbaba;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
}
.image-list-item {
width: 9rem;
height: 9rem;
margin: 0.5rem;
margin-top: -0.5rem;
}
.image-resize {
width: 100px;
height: 160px;
}
其结果是:Demo here