固定DIV在5个流体DIV旁边 [英] Fixed DIV next to 5 fluid DIVs
问题描述
我需要一个相当复杂的布局.我已经尝试了几个小时来解决这个问题,但还是没有运气.我需要在5个流体DIV旁边固定一个div.
I require a fairly complex layout. I've been trying for a few hours to figure this out but still no luck. I require a fixed div next to 5 fluid DIVs.
所有流体DIV的百分比必须不同,但所有6个DIV的总和(1个固定+ 5个流体)必须等于父DIV的宽度.父div的高度将是固定的.
All the fluid DIVs need to be different percentages, but all 6 DIVs combined (1 fixed + 5 fluid) must equal to the width of the parent DIV. The height of the parent div will be fixed.
这就是我想要的: http://i.imgur.com/u0L6hrz.png
但是我现在拥有的是: http://jsfiddle.net/mnNzR/
But here's what I have right now: http://jsfiddle.net/mnNzR/
我需要消除空白,以便所有组合的DIV充满整个盒子.如果可能的话,我不希望使用JS.任何帮助将不胜感激,谢谢.
I need to eliminate the whitespace so all the DIVs combined fill the whole box. I'd prefer not to use JS, if possible. Any help will be appreciated, thanks.
<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>
推荐答案
通过将流体div
包裹在带有margin-left:150px;
的容器中,可以使用CSS实现布局.
You can achieve your layout with CSS by wrapping the fluid div
s in a container with margin-left:150px;
.
这时您必须格网,使流体div
的宽度之和等于100%:
Then you must claculate so the sum of fluid div
s width equals 100% :
FIDDLE
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;
}
这篇关于固定DIV在5个流体DIV旁边的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!