CSS布局，具有2个固定宽度的列和8x 100%宽度的左侧定位
CSS布局，具有2个固定宽度的列和8x 100%宽度的左侧定位
提问于 2018-08-07 03:12:56
我不明白..。设置布局宽度2个固定宽度列(每个列60px)和8 x 100%宽度列的样式。这些100%的列应该从左开始放置，并且每个列都有一个覆盖：
layout红色:浏览器，绿色:2个固定宽度的列，蓝色: 8x 100%宽度的列，从左开始排列
网格容器是100%宽度(和100vh)。现在我不能正确地从左侧计算每个蓝色列的位置：
#thegrid {
display: block;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.grid {
border-left:1px solid #fff;
background-color:#ccc;
width: 100%;
min-height: 100vh;
position: absolute;
}
#g1 { left:60px; z-index: 2;}
#g2 { left:calc(12.5% - 60px); z-index: 3;}
#g3 { left:calc(25% - 60px); z-index: 4;}
#g4 { left:calc(37.5% - 60px); z-index: 5;}
#g5 { left:calc(50% - 60px); z-index: 6;}
#g6 { left:calc(62.5% - 60px); z-index: 7;}
#g7 { left:calc(75% - 60px); z-index: 8;}
#g8 { left:calc(87.5% - 60px); z-index: 9;}
#gridleft {
z-index: 1;
width: 100%;
min-height: 100vh;
position: absolute;
left:0px;
}
#gridright {
z-index: 10;
min-height: 100vh;
position: absolute;
left:calc(100% - 60px);
border-right: 0px;
border-left: 1px solid rgba(255, 255, 255, .3);
width: 100%;
}HTML
<div id="thegrid" class="clearfix">
<div class="gridleft" id="gridleft"></div>
<div id="g1" class="grid"><div class="gridline"></div></div>
<div id="g2" class="grid"><div class="gridline"></div></div>
<div id="g3" class="grid"><div class="gridline"></div></div>
<div id="g4" class="grid"><div class="gridline"></div></div>
<div id="g5" class="grid"><div class="gridline"></div></div>
<div id="g6" class="grid"><div class="gridline"></div></div>
<div id="g7" class="grid"><div class="gridline"></div></div>
<div id="g8" class="grid"><div class="gridline"></div></div>
<div class="gridright" id="gridright"></div>
</div>是的:列的.grid必须是100%的宽度。
回答 1
Stack Overflow用户
发布于 2018-08-07 05:13:23
对于您的left属性的计算，如果您只使用类似于left: calc(60px * (n - 1));的内容，可能会更简单。这将允许考虑到左侧边栏元素，但仍然保持每个元素之间相同的60px边距。
.container {
width: 500px;
height: 200px;
border: 1px solid red;
position: relative
}
.container .grid {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.container .left,
.container .right {
width: 60px;
background-color: yellow;
z-index: 100;
}
.container .left {
left: 0;
}
.container .right {
right: 0;
}
.container .list:nth-child(1) {
left: calc(60px * 0);
z-index: 8;
background-color: hsl(200, 100%, 25%);
}
.container .list:nth-child(2) {
left: calc(60px * 1);
z-index: 7;
background-color: hsl(200, 100%, 30%);
}
.container .list:nth-child(3) {
left: calc(60px * 2);
z-index: 6;
background-color: hsl(200, 100%, 35%);
}
.container .list:nth-child(4) {
left: calc(60px * 3);
z-index: 5;
background-color: hsl(200, 100%, 40%);
}
.container .list:nth-child(5) {
left: calc(60px * 4);
z-index: 4;
background-color: hsl(200, 100%, 45%);
}
.container .list:nth-child(6) {
left: calc(60px * 5);
z-index: 3;
background-color: hsl(200, 100%, 50%);
}
.container .list:nth-child(7) {
left: calc(60px * 6);
z-index: 2;
background-color: hsl(200, 100%, 55%);
}
.container .list:nth-child(8) {
left: calc(60px * 7);
z-index: 1;
background-color: hsl(200, 100%, 60%);
}<div class="container">
<div class="grid left"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid right"></div>
</div>
如果我误解了你的问题，请告诉我，我很乐意更新我的答案。
根据@Cycle99的评论，我已经调整了帖子以更好地匹配请求。这一次，项目的分层是在容器内发生的，而不是像最初的帖子那样在外部发生。因此，计算结果为left: calc(100% * ((n - 1) / 8));。
.container {
width: 100%;
height: 200px;
position: relative
}
.container .grid {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.container .left,
.container .right {
width: 60px;
background-color: yellow;
z-index: 100;
}
.container .center {
width: calc(100% - 120px);
margin-left: 60px;
}
.container .left {
left: 0;
}
.container .right {
right: 0;
}
.container .list:nth-child(1) {
left: 0;
z-index: 1;
background-color: hsl(200, 100%, 25%);
}
.container .list:nth-child(2) {
left: calc(100% * (1 / 8));
z-index: 2;
background-color: hsl(200, 100%, 30%);
}
.container .list:nth-child(3) {
left: calc(100% * (2 / 8));
z-index: 3;
background-color: hsl(200, 100%, 35%);
}
.container .list:nth-child(4) {
left: calc(100% * (3 / 8));
z-index: 4;
background-color: hsl(200, 100%, 40%);
}
.container .list:nth-child(5) {
left: calc(100% * (4 / 8));
z-index: 5;
background-color: hsl(200, 100%, 45%);
}
.container .list:nth-child(6) {
left: calc(100% * (5 / 8));
z-index: 6;
background-color: hsl(200, 100%, 50%);
}
.container .list:nth-child(7) {
left: calc(100% * (6 / 8));
z-index: 7;
background-color: hsl(200, 100%, 55%);
}
.container .list:nth-child(8) {
left: calc(100% * (7 / 8));
z-index: 8;
background-color: hsl(200, 100%, 60%);
}
.container .list:nth-child(9) {
left: calc(100% * (8 / 8));
z-index: 8;
background-color: hsl(200, 100%, 60%);
}<div class="container">
<div class="grid left"></div>
<div class="container center">
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
<div class="grid list"></div>
</div>
<div class="grid right"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51714213
复制相关文章
相似问题