CSS - Fluid column [duplicate]

问题

Here is my code: http://jsfiddle.net/2Mtcq/.

I want the middle column to be fluid, but left and right colums - to be set width. How do I make the middle fluid? I want it to look something like:

https://dl.dropboxusercontent.com/u/22358199/Screen%20Shot%202013-05-31%20at%2011.00.31%20AM.png

body {
    margin:10px;
}

#header {
    width:600px;
    background-color: #f0efee;
}


#main{
    width:600px;
}
#leftcol {
    background-color: #f0efee;
    float:left;
    margin: 10px 10px 10px 0;
    width:100px;
}
#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
}
#rightcol {
    background-color: #FCF;
    float: left;
    margin: 10px 0 10px 0;
    width:100px;
}

#footer {
    width:600px;
    background-color: #f0efee;
    clear:both;
}

回答1:

Working jsFiddle Demo

Change your HTML to this one:

<div id="main">
    <div id="leftcol">Left</div>
    <div id="rightcol">Right</div>
    <div id="midcol">Middle middle Middle middle Middle middle</div>
</div>

I've put midcol after left and right.

And in your CSS:

Float your rightcol element with right.
Change the margin of midcol to margin: 0 110px; (from left and right, each 110px: 100px for columns, 10px for gaps.
Add margin: 10px 0; to #main element.
Remove unnecessary properties.

Here you are:

#main {
    width:600px;
    margin: 10px 0;
}

#leftcol {
    background-color: #f0efee;
    float:left;
    width:100px;
}

#midcol {
    background-color: #FFC;
    margin: 0 110px;
}

#rightcol {
    background-color: #FCF;
    float: right;
    width:100px;
}

Also you can make your #main width to 100% for having a full page width:

#main {
    width: 100%;
    margin: 10px 0;
}

回答2:

If you are not supporting IE8, you can use calc on your CSS.

#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
    width: calc(100% - 220px);
}

For see browser support click here

回答3:

Try This

#midcol {
    min-width:100px;
    width:auto;
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
}

回答4:

Have a look at this, gives an explanation about this: Div width 100% minus fixed amount of pixels

it explains all the details

the best solution i see is using css calc as stated in that link.

example here: http://jsfiddle.net/2Mtcq/7/

#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
    width: -moz-calc(100% - 220px);
    width: -webkit-calc(100% - 220px);
    width: calc(100% - 220px);

}

browser support of calc here: http://caniuse.com/calc

you could use that and as a worst case have JS fallback.

来源：https://stackoverflow.com/questions/16861492/css-fluid-column

标签

css

fluid-layout