Question

我的申请中有两个div。如何使我的左div适合所有空间直到右div。右边一个可以是任何宽度的文本或图像。

<div id="header" class="header">
    <div class="logo">
        <img src="/Content/images/my_logo.png" alt="" />
    </div>
    <div class="logoClient">
        Test Client /*here can be text or image with ANY SIZE */
    </div>
    <div class="clear"></div>
</div>

在这个例子中，我已经完成了固定宽度（700px和200px），但这是错误的，因为正确的文本是动态的，我想要留下绿色条也是动态的。

http://jsfiddle.net/C5GL6/1/

使用table，table-cell css选项的另一种方法......但是再次......不能使左侧的绿色条适合所有空间。

http://jsfiddle.net/sjfQj/

我怎样才能做到这一点？

Answer 1

删除div中的宽度尺寸

编辑小提琴 http://jsfiddle.net/C5GL6/2/

 .logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;

}

Answer 2

删除width并将float:left添加到两个div

    .header 
{
    width: 950px;
    font-family:Helvetica, Arial, sans-serif;
    display:table
}

.logo {
    height: 55px;
    padding: 10px 20px;
    background: #004B35;
    display:table-cell;
}

 .logoClient 
 {
   display:table-cell;
    height: 55px;
    line-height: 55px;
    padding: 10px 0px;
    margin:0px -10px 0px 0px;
    font-size: 30px;
    color: #004B35;
    overflow:hidden;
    font-weight: bold;
    text-align: right;
    background: red;
}

<强> DEMO Updated

动态宽度向左浮动div

2 个答案: