Question

我想修复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;
}

我在下面的屏幕截图中得到了结果（请忽略其他按钮。）

screen shot

screen shot2

图像越多，图像越小。

我想要包装器div中的div项具有滚动条和固定宽度。

Answer 1

您的代码将生成如下内容：

<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

如何使用scss固定div宽度（with react）

1 个答案: