自動調整2格根據需要編寫CSS調整2列內容

的div包含在一個固定大小的div自動調整2格根據需要編寫CSS調整2列內容

<div style="width:500px"> 
<div id="description" class="col1"> 
</div> 
<div id="price" class="col2"> 
</div> 
</div> 

.col1 
{ 
float: left; 
clear: left; 
} 
.col2 
{ 
text-align: right; 
float: right; 
max-width: 150px; 
}

我設置COL2的一個最大寬度，我想以下行爲。

col1內容是可變的，col2內容也是。
如果col2的內容小於150px寬度，則col1必須佔用剩餘的位置。
如果col2的內容大於150px寬度，則col2將限制爲150px寬度，col1限制爲350px。

問題是col1的內容寬度超過了可用空間，col1將佔用所有容器寬度（500px）。 col1將在col1後垂直移動。

來源

2011-08-18 enenkey

您的要求一開始讓我感到困惑，但現在再看一遍，這很有道理。

參見：http://jsfiddle.net/thirtydot/SJg4M/

HTML：

<div class="colContainer"> 
    <div id="price" class="col2">price</div> 
    <div id="description" class="col1">description</div> 
</div>

正如你看到的，我不得不換的#price和#description的順序。我希望這是可以接受的。

CSS：

.colContainer { 
    width: 500px; 
    overflow: hidden; 
    background: #ccc 
} 
.col1 { 
    overflow: hidden; 
    background: #f0f 
} 
.col2 { 
    text-align: right; 
    float: right; 
    max-width: 150px; 
    background: #999 
}

來源

2011-08-18 20:18:00 thirtydot

太棒了！這正是我所期待的 – enenkey

~~只需加上 .col1的最大寬度即可。如果你的容器div是500px，那麼~~

這是最好的我可以拿出來，使用javascript來設置col1的寬度爲500px容器和col2寬度之間的差異。

var width = 500 - $('#price').width(); 
$('#description').css('width', width+'px');

例子：http://jsfiddle.net/JZLBN/

來源

2011-08-18 19:10:37 Michael

這是不是我要找的。如果我把最大寬度：350像素col1。例如，如果col2爲100像素，則col1不會使用50像素的間距。 – enenkey

哦，我明白了，我的不好。 – Michael

我唯一能想到的就是使用javascript將col1的寬度設置爲500和col2的寬度差。也許有人更聰明將能夠給你一個CSS的答案。用jQuery代碼編輯我的答案。 – Michael

我沒有REDY解決方案，但是我的想法是玩弄各種顯示：XX的特性，例如

display: table-row

等我的天堂」雖然我測試了它，但我很好奇它是否會實現這個功能:)它不會在IE7中支持，所以如果你需要它，只需跳過我的建議即可。 IT不是一個真正的答案，會很樂意閱讀關於這個想法的評論。

來源

2011-08-18 20:02:44 mkk

自動調整2格根據需要編寫CSS調整2列內容

回答

相關問題