Question

我有一个超级容器（适合屏幕宽度，有边距和填充），其中包含一个更宽的容器，而容器又包含（对于冗余而言）未确定（DB驱动）的左浮动框数。它是Backbone / Underscore模板的所有部分。

我希望盒子的宽度与超级容器的宽度相同，以便一次只能看到一个（在Backbone View中有一个水平滚动功能）。我知道我可以使用jQuery获取超级容器的宽度并在渲染时将其应用于盒子，但我绝对更喜欢纯CSS解决方案来避免屏幕大小调整的问题。

说清楚：

HTML：

<div id="supercontainer">
  <div id="wide-container">
    <div class="fun-box"></div>
    <div class="fun-box"></div>
    <div class="fun-box"></div>
  </div>
</div>

CSS：

#supercontainer {
  width:100%;
  overflow:hidden;
  margin:50px;
}

#wide-container {
  display:table;
}

.fun-box {
  height:100%;
  float:left;
  width: ???; /* something that makes it as wide as the supercontainer */
}

我该怎么做？

Answer 1

如果#supercontainer的窗口宽度始终为100%，则可以通过对{

>应用width: 100vw来匹配它

.fun-box {
  height:100%;
  float:left;
  width: 100vw; 
}

视口百分比长度定义了相对于视口大小的长度，即文档的可见部分。

1vw =视口宽度的1/100

- MDN

Answer 2

您可以尝试将.fun-box的宽度增加到#wide-container的三分之一，#wide-container三次#supercontainer：

#wide-container {
    width: 300%;
}
.fun-box {
    width: 33.33%;
}

Demo

CSS：给予元素与＆＃34;祖父母＆＃34;相同的宽度元件

2 个答案: