自动调整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列内容

回答

相关问题