使用16.66vw的页面上的6个相同大小的框
使用16.66vw的页面上的6个相同大小的框
提问于 2015-07-22 19:10:38
我把6个大小相等的方框放在一个页面上，使用
li{
width = 16.66vw;
height = 16.66vw;
float: left;
}还有一些其他的小部分，但我有一个问题，在windows上，chrome。右边的滚动条在页面上增加了大约12px。这意味着第6个框溢出到下一行。
然而，在移动设备上，它很好，因为滚动条覆盖在上面。
对此有一个优雅的解决方案吗？
我试过了
li{
width = calc(16.66vw - 12px);
height = calc(16.66vw - 12px);
float: left;
}这在windows上是可以的，但在移动端就有一个差距。
小提琴：
回答 2
Stack Overflow用户
发布于 2015-07-22 19:15:26
来自MDN的
视口-百分比长度
视区-相对于视区大小定义的长度百分比，即文档的可见部分。修改视口的大小时，只有基于Gecko的浏览器才会动态更新视口的值(通过修改台式计算机上的窗口大小或通过在电话或平板电脑上打开设备)。
与overflow：一起使用时，最终滚动条占用的空间不会从我的强调的视口中减去，而在overflow:scroll的情况下，它会减去。
正是由于这个原因，你可以使用percentage width而不是vw。
这些盒子不会是正方形的，但我认为你很难发现其中的区别。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.boxes {
max-width: 100vw;
}
ul {
list-style-type: none;
display: inline-block;
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
/* quick cleafix */
}
li {
background-color: #454344;
width: 16.66%;
height: 16.66vw;
float: left;
border: solid gray 1px;
}<div class="boxes">
<ul>
<li class="box-inner">
<div class="inner"></div>
</li>
<li class="box-inner">
<div class="inner"></div>
</li>
<li class="box-inner">
<div class="inner"></div>
</li>
<li class="box-inner">
<div class="inner"></div>
</li>
<li class="box-inner">
<div class="inner"></div>
</li>
<li class="box-inner">
<div class="inner"></div>
</li>
</ul>
</div>
现代浏览器的替代品：flexbox
Stack Overflow用户
发布于 2015-07-22 19:18:44
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }我使用这些规则开始一个页面，每个元素和伪元素都在一个公共点上。请参阅this for box-sizing和this for resets
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31561454
复制相关文章
相似问题
腾讯云开发者
