我需要一个相当复杂的布局。我已经尝试了几个小时来解决这个问题,但仍然没有运气。我需要 5 个流体 DIV 旁边有一个固定 div。
所有流体 DIV 都需要具有不同的百分比,但所有 6 个 DIV 组合(1 个固定 + 5 个流体)必须等于父 DIV 的宽度。父div的高度将被固定。
这就是我想要的:https://i.stack.imgur.com/psb2t.png https://i.stack.imgur.com/psb2t.png
但这是我现在所拥有的:http://jsfiddle.net/mnNzR/ http://jsfiddle.net/mnNzR/
我需要消除空白,以便所有合并的 DIV 填满整个框。如果可能的话,我不想使用 JS。任何帮助将不胜感激,谢谢。
<div class="parent">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5"></div>
<div class="s6"></div>
</div>
您可以通过包裹流体来使用 CSS 实现布局div
s 在一个容器中margin-left:150px;
.
然后你必须计算液体的总和div
s 宽度等于 100% :
FIDDLE http://jsfiddle.net/webtiki/mnNzR/16/
HTML :
<div class="parent">
<div class="s1"></div>
<div class="fluid_wrap">
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5"></div>
<div class="s6"></div>
</div>
</div>
CSS :
.parent {
display:block;
width: 100%;
height: 150px;
background-color: white;
box-shadow: 0 0 5px 5px rgba(215, 44, 44, 0.9);
}
.s1 {
width: 150px;
height: 100%;
display: block;
background-color: #00baff;
float: left;
}
.fluid_wrap {
margin-left:150px;
height:100%;
}
.s2 {
width: 17.5%;
height: 100%;
display: block;
background-color: #0090c5;
float: left;
}
.s3 {
width:12.5%;
height: 100%;
display: block;
background-color: #006b93;
float: left;
}
.s4 {
width: 21%;
height: 100%;
display: block;
background-color: #004660;
float: left;
}
.s5 {
width: 21%;
height: 100%;
display: block;
background-color: #002939;
float: left;
}
.s6 {
width: 28%;
height: 100%;
display: block;
background-color: #001720;
float: left;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)