div的动态宽度彼此相邻

时间:2014-05-21 09:47:16

标签: html css css3

我有两个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添加内容时,应该推动/调整左侧宽度

2 个答案:

答案 0 :(得分:2)

目前还不完全清楚你要做什么但是显示: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;
}

答案 1 :(得分:1)

为每个流体箱添加百分比

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

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

.wrapper {
    width:45%;
}

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