Fixed DIV next to 5 fluid DIVs

问题

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.

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.

Here's what I want: http://i.imgur.com/u0L6hrz.png

But here's what I have right now: http://jsfiddle.net/mnNzR/

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>

回答1:

You can achieve your layout with CSS by wrapping the fluid divs in a container with margin-left:150px;.

Then you must claculate so the sum of fluid divs 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;
}

来源：https://stackoverflow.com/questions/23096729/fixed-div-next-to-5-fluid-divs

标签

css

html

fixed

fluid-layout