展開div的寬度

我正在使用其中一個部分使用兩個div，左邊是浮動值。當右div不可見時，我想擴展左div的寬度。展開div的寬度

這是我在做什麼：

<style> 

    body{ 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:12px 
    } 
    .mainContainer{ 
     width:300px; 
     border:blue solid 1px; 
     overflow:hidden 
    } 
    .leftCont{ 
     float:left; 
     border:green solid 1px 
    } 
    .rightCont{ 
     float:left; 
     border:red solid 1px 
    } 

</style> 

<div class="mainContainer"> 
    <div class="leftCont"> 
     Lorem ipsum dolor sit amet, consectetur 
    </div> 
    <div class="rightCont"> 
     right 
    </div> 
</div>

我想只用DIV/CSS解決這個問題。

感謝，

來源

2013-04-15 Rohit Mehra

嗨羅希特·梅赫拉http://jsfiddle.net/rohitazad/ creTj/ –

如果你不介意的話，你可以做到這一點通過通過在左邊之前放置正確的div來改變你的標記：

<div class="rightCont"></div> 
<div class="leftCont"></div>

然後，你浮到div.rightCont右邊，然後給人留下一個whitout浮動它溢出：你想把這個

.leftCont{ 
    overflow: hidden; 
    border: green solid 1px 
} 
.rightCont{ 
    float: right; 
    border: red solid 1px 
}

來源

2013-04-15 12:22:31 pzin

@ pzin這是解決這個問題的好方法。我將應用此代碼。希望它能夠工作。謝謝：） –

隨着float:left這將是不可能的，請嘗試使用display:table和display:table-cell

body{ 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:12px 
    } 
    .mainContainer{ 
     width:300px; 
     overflow:hidden; 
     border:1px solid blue; 
     display:table; 
    } 
    .leftCont{   
     border:green solid 1px; 
     display:table-cell; 
    } 
    .rightCont{ 
     border:red solid 1px; 
     display:table-cell; 
    }

DEMO

來源

2013-04-15 12:00:47

這很好，但它在ie7中不起作用。任何使用JQUERY的解決方案。謝謝 –

展開div的寬度

回答

相關問題