Question

我有两个div，左边是fl-left，右边是fl-right，右边是浮动的。两个div都没有固定的宽度，并且它们都需要内联。

<div class="wrapper">
<div class="fl-left">Hey diddle diddle the cat and the fiddle.</div>
<div class="fl-right">Btn1 Btn2</div>
</div>

两者的内容都是动态的。我想要做的是，当内容被添加到fl-left或fl-right时，它们不应该分成第二行。他们应该相应调整宽度。

我该怎么做？

JSFiddle，如有必要http://jsfiddle.net/MvWJN/

修改

fl-left应该有100％的宽度减去fl-right占用的空间

当向fl-right添加内容时，应该推动/调整左侧宽度

Answer 1

目前还不完全清楚你要做什么但是显示：table-cell可能是最佳解决方案。

JSfiddle Demo

<强> CSS

.fl-left {
    color:red;
}

.fl-right {
    text-align: right;
}

.wrapper {
    display: table;
    margin:10px;
    width:100%;
}
[class*=fl] {
    display:table-cell;
    border:1px solid grey;
}

Answer 2

为每个流体箱添加百分比

.fl-left {
    float:left;
    color:red;
    width: 50%;
}

.fl-right {
    float:right;
    width: 50%;
}

.wrapper {
    width:45%;
}

示例：http://jsfiddle.net/MvWJN/1/

div的动态宽度彼此相邻

2 个答案: