CSS中間欄的靈活寬度

Question

我有一個三列的layoyut - 左，中，右。

<div id="content-area" class="clearfix">

    <div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>

    <div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>

    <div id="content-right">
        <f:format.raw>{navigator}</f:format.raw>
        <f:format.raw>{content_right}</f:format.raw>
    </div>

</div>

用這個CSS

#all-wrapper {
    width: 960px;
    margin: 0 auto;
}

#content-area {
    padding: 10px 0;
    margin: 5px auto;
}

#content-left {
    float: left;
    width: 180px;
    min-height: 400px;
}

#content-middle {
    width: 600px;
    text-align: left;
    padding: 0 10px;
    line-height: 20px;
}

#content-right {
    float: right;
    min-width: 180px;
    min-height: 200px;
    text-align: left;
}

左邊是180px，中間是600px，右邊是180px，這是一個960px的布局，就像這樣。

http://jsfiddle.net/kxuW6/

在大多數情況下，這可以作為意圖使用，但我希望中間列根據右列中的內容具有稍微靈活的寬度。 我將圖像放在右列中，寬度為360px，中間列為420px寬。

我的問題是寬度超過180像素的圖像，fx。 360px，將打破列的浮動，按照這個小提琴

http://jsfiddle.net/5hNy5/

我希望它像這個小提琴，但沒有中間列的固定寬度。

http://jsfiddle.net/Eqwat/

Answer 1

使用display: table-cell而不是float ...

如果您支持更現代的瀏覽器，您可以嘗試：

#content-area {
    width: 960px;
    padding: 10px 0;
    margin: 5px auto;
    display: table;
    border: 1px dashed blue;
}
#content-left {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    width: 180px;
    height: 200px;
}
#content-middle {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    text-align: left;
    padding: 0 10px;
    line-height: 20px;
}
#content-middle p {
    margin-top: 10px;
}
#content-right {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    width: 180px;
    height: 200px;
    text-align: left;
}

表格單元格的寬度值的作用類似於最小值，因此如果您將圖像插入到一個圖像中，則左側和右側列將展開，而中間列將調整為占據剩余寬度。

請參閱演示： http ： //jsfiddle.net/audetwebdesign/V7YNF/

Answer 2

應該解決上述問題的最短形式：

HTML：

<div class="area">
    <div class="side"></div>
    <div>Some content here</div>
    <div class="side"></div>
</div>

CSS：

<!-- language: CSS -->

.area {
    width: 100%;
    display: table;
}
.area > *{
    display:table-cell;
}

.side {
    width: 100px;
    background-color:gray;
}

看到這個小提琴 。

Answer 3

如果你可以改變列的源順序，你可以將#content-middle放到底部並給它display: block和overflow: hidden 。

標記：

<div id='all-wrapper'>
    <div id="content-area" class="clearfix">
        <div id="content-left"></div>
        <div id="content-right"></div>
        <div id="content-middle"></div>
    </div>
</div>

CSS

#all-wrapper {
    width: 960px;
    margin: 0 auto;
    }

#content-left {
    float: left;
    width: 180px;
    min-height: 400px;
    }

#content-middle {
    display: block;
    overflow: hidden; 
    }

#content-right {
    float: right;
    min-width: 180px;
    min-height: 200px;
    }

現在，當右列的寬度發生變化時，中間列將占用可用空間。

演示： http ： //dabblet.com/gist/7200659

必讀： http ： //www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/