Question

我有一个宽度，高度和overflow-x auto的容器div。我希望能够水平滚动元素。在里面我有一个容纳所有元素的内部容器。

如果我给内部div一个固定的宽度，在这种情况下是3000像素，它可以工作，但我希望它动态调整其宽度。我怎么能做到这一点？

这是我的小提琴。

<div class="outer" style="width:100%; height:500px;overflow-x:auto;">
    <div class="inner" style="height:100%; width:3000px;">
       <div class="item" style="height:100%; width:300px; float:left;">
       <div class="item" style="height:100%; width:300px; float:left;">
       <div class="item" style="height:100%; width:300px; float:left;">
       <div class="item" style="height:100%; width:300px; float:left;">
   </div>
</div>

Answer 1

您需要使用.inner上的white-space:nowrap;和display: inline-block;上的.item

div.outer {
  width:100%;
  height:400px;
  overflow-x:scroll;
  overflow-y: hidden;
}

div.inner {
  position:relative;
  height:100%;
  white-space:nowrap; 
}

div.item {
  width:300px;
  height:100%;
  display: inline-block;
}

div.item:nth-child(2n+1){
  background:blue;
}

div.item:nth-child(2n+2){
  background:green;
}

<div class="outer">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

如何使内部div调整其子元素的宽度

1 个答案: