Question

要获得全宽的绿色背景，如果我将项目的百分比宽度更改为px就可以了！

但我需要百分之百。

我应该在父溢出div中为子节点设置百分比宽度，父节点的宽度也将基于百分比。

.frame {
   overflow-x: scroll;
}

.pane {
   white-space: nowrap;
   display: inline-block;
   background:green;
}

.item {
   display: inline-block;
   width: 18%;
   height: 50px;
   background-color: grey;
}

<div class="frame">
   <div class="pane">
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div> 
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>            
   </div>
</div>

Answer 1

考虑使用视口宽度和视口高度而不是百分比

检查此代码段

.frame {
   overflow-x: scroll;
}

.pane {
   white-space: nowrap;
   display: inline-block;
   background:green;
}

.item {
   display: inline-block;
   width: 18vw;
   height: 50px;
   background-color: grey;
}

<div class="frame">
   <div class="pane">
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div> 
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>            
   </div>
</div>

希望这有帮助

Answer 2

我看到你在这里尝试做什么，但遗憾的是你所拥有的CSS却与之相矛盾。

根据您的overflow-x: scroll，我可以看到您想要一个水平滚动的容器。

您不能同时使用white-space: nowrap;，display: inline-block;和width: 18%;。当元素显示为内联块或内联块时，其宽度由其子项确定，具有基于百分比的宽度的元素从父项获取其宽度。你基本上是说父母需要孩子的宽度来确定它的大小，并且孩子们需要父母的宽度来确定他们的大小。这没有意义 - 如果您不知道x = y + z;和y是什么，则无法解决z。这些属性相互矛盾。使用您尝试使用的属性无法完成您想要做的事情。

要实现您想要的效果，您需要将.item设置为display: block; float: left;，将宽度设置为固定单位大小（例如像素），并设置直接父级（{{1} }）width属性如下：

.pane

基本上，宽度是您所计算的项目数量乘以计算项目宽度（在Codepen示例中，由于水平边距而为102px），然后将项目宽度乘以项目数量（所以10）。

在我的示例中，我在CSS中包含了硬编码的窗格宽度，因此您可以看到正在发生的事情，以及使用jQuery计算的窗格宽度（对于具有类width = (.item width + horizontal margins) * item count的项目）。您可以像我一样或服务器端计算此客户端，并将值添加为内联样式。

假设你有以下HTML：

.pane-calculated

您需要以下CSS：

<div class="frame">
   <div class="pane">
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div> 
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>     
   </div>
</div>

请参阅Codepen：http://codepen.io/tinacious/pen/NbMaKJ?editors=1111

我可以使用白色空间div的子节点的百分比宽度：nowrap

2 个答案: