Question

我需要编写CSS来调整固定大小div中包含的2列div

<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）。并且col2将在col1之后垂直移动。

Answer 1

你的要求一开始让我困惑，但现在再看一遍，这是有道理的。

请参阅： 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
}

Answer 2

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

这是我能想到的最好的，使用javascript将col1的宽度设置为500px容器和col2宽度之间的差异。

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

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

Answer 3

我没有redy解决方案，但我的想法是玩各种显示：XX属性，例如

  display: table-row

等。我没有测试过它，我很好奇，如果这样做诀窍:)它将不会在IE7中得到支持，所以如果你需要它，请跳过我的建议。这不是一个真正的答案，很乐意阅读关于这个想法的评论。

根据内容自动调整2 div

3 个答案: