Css 根据内容自动调整2个div

我需要编写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; 
}

.col1
{
浮动：左；
清除：左；
}
.col2
{
文本对齐：右对齐；
浮动：对；
最大宽度：150px；
}

我为col2设置了一个最大宽度，我想要以下行为

• col1内容是可变的，col2内容也是可变的
• 如果col2的含量小于150px宽度，则col1必须占据剩余位置
• 如果col2的含量大于150px宽度，col2将限制为150px宽度，col1限制为350px宽度

问题是col1的内容宽度超过了可用空间，col1将占用所有容器宽度（500px）。col2将在col1之后垂直移动。

只需为

添加一个最大宽度。col1

。如果您的容器div是500px，那么

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

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

示例：

只需为

.col1

添加一个最大宽度。如果您的容器div是500px，那么

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

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

---

示例：

我没有redy解决方案，但是我的想法是使用各种display:XX属性

  display: table-row

---

等等，我还没有测试过它，我很好奇这是否会奏效：）它在IE7中不受支持，所以如果你需要它，就跳过我的建议。这不是一个真正的答案，我很乐意阅读关于这个想法的评论。

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

  display: table-row

---

等等，我还没有测试过它，我很好奇这是否会奏效：）它在IE7中不受支持，所以如果你需要它，就跳过我的建议。这不是一个真正的答案，我很乐意阅读关于这个想法的评论。

你的要求一开始让我感到困惑，但现在再看看，它是有意义的

请参见：

HTML:

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

价格
描述

如您所见，我必须交换

#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
}

---

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

请参见：

HTML:

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

价格
描述

如您所见，我必须交换

#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
}

---

那不是我要找的。如果我把最大宽度：350px放到col1。例如，如果col2是100px，那么col1将不会使用50px的间隙。我唯一能想到的是使用javascript将col1的宽度设置为500和col2的宽度之差。也许更聪明的人能给你一个css答案。用jquery代码编辑了我的答案。这不是我想要的。如果我把最大宽度：350px放到col1。例如，如果col2是100px，那么col1将不会使用50px的间隙。我唯一能想到的是使用javascript将col1的宽度设置为500和col2的宽度之差。也许更聪明的人能给你一个css答案。用jquery代码编辑了我的答案。太好了！这正是我所期待的！那正是我想要的