动态宽度左浮动div

我的应用程序中有两个div。我怎样才能让我的左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>

在这个例子中，我具有固定宽度进行（700像素和200像素），但这是错误的，因为正确的文本是动态的，我要离开了绿坝是动态的了。

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

与表，表单元格的CSS选择另一种方法......但是......又不能让左绿条适合所有空间。

http://jsfiddle.net/sjfQj/

我怎样才能做到这一点？

来源

2014-01-16 Gab

您是否在寻找[this]（http://stackoverflow.com/questions/16529291/div-to-take-up-entire-remaining-width/16529353#16529353）？有人最近downvoted我的回答没有很好的理由 –

从div的 – Anup

@ Mr.Alien删除'宽度，不，在你的例子中左div有固定宽度...我不希望左右div都有固定宽度... :) – Gab

在DIV

编辑拨弄 http://jsfiddle.net/C5GL6/2/

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

}

来源

2014-01-16 11:30:42 neel

http://jsfiddle.net/C5GL6/3/ 绿条不适合所有地方，直到右边的文本 – Gab

卸下宽度尺寸删除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

来源

2014-01-16 11:41:32 Sowmya

http://jsbin.com/ORetUbu/4 小文是不是在正确的部分和左半部分apperaing不适合所有剩余的空间。 – Gab

使用'display：table'和'table-cell'。这里是演示http://jsbin.com/ORetUbu/6/ – Sowmya

这将是一个很好的方式...但无论如何，我需要正好相反（红色部分必须与文本的大小（“测试客户端的大小“或任何文本，他们将是）和黑色部分必须适合剩余空间）... – Gab

动态宽度左浮动div

回答

相关问题