Question

我想在右边有一个滚动div，但我不知道那个盒子的宽度是多少。

如果我将它设置为自动，它会以100％的最大宽度停止，当我给出100％时也没有帮助。我希望内部div只要需要在底部创建滚动条就可以了。我发现它工作的唯一方法是给它实际的宽度，但我不能解释内部div的宽度是什么......

在这个例子中，我理论上输入了每个内部元素的宽度，即使我知道每个盒子的宽度是多少，我不知道会有多少个div。

<div style="width: 100%;height: 250px;overflow-x: scroll;overflow-y: hidden;">
            <div style="width: 3000px;height: 250px;">
              <div style="width:300px;height:250px;float:left;background:red;">
              1
              </div>
              <div style="width:300px;height:250px;float:left;background:blue;">
              2
              </div>
              <div style="width:300px;height:250px;float:left;background:red;">
              3
              </div>
              <div style="width:300px;height:250px;float:left;background:blue;">
              4
              </div>
              <div style="width:300px;height:250px;float:left;background:red;">
              5
              </div>
              <div style="width:300px;height:250px;float:left;background:blue;">
              6
              </div>
            </div>
            </div>

Answer 1

只需将width替换为min-width。

至于特异性，在标签内声明样式属性会覆盖在 yourStyle .css文件中写入的样式，因此在大多数情况下，将样式声明为内部不是最佳做法HTML元素，但它肯定是可以接受的（只是添加了一个小注释）。

<div style="width: 100%;height: 250px;overflow-x: scroll;overflow-y: hidden;">
    <div style="min-width: 3000px;height: 250px;">
      <div style="min-width:300px;height:250px;float:left;background:red;">
      1
      </div>
      <div style="min-width:300px;height:250px;float:left;background:blue;">
      2
      </div>
      <div style="min-width:300px;height:250px;float:left;background:red;">
      3
      </div>
      <div style="min-width:300px;height:250px;float:left;background:blue;">
      4
      </div>
      <div style="min-width:300px;height:250px;float:left;background:red;">
      5
      </div>
      <div style="min-width:300px;height:250px;float:left;background:blue;">
      6
      </div>
    </div>
</div>

Answer 2

如果我说得对，你可以在父元素上使用white-space: nowrap并在子元素上使用display: inline-block

＆＃13;

.wrap {
  overflow-x: auto;
  white-space: nowrap;
}

.wrap > div {
  background-color: red;
  display: inline-block;
  height: 250px;
  width: 300px;
  white-space: initial;
  color: white;
}

.wrap > div:nth-child(even) {
  background-color: blue;
}

＆＃13;

<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

＆＃13;

滚动右Div未知宽度

2 个答案: