如何使用CSS自动调整div的宽度？ [英] How automatically adjust div's width using CSS?

问题描述

请考虑以下示例：

HTML：

 < div class =wrapper> 
< div class =left>有些文字在这里< / div>< div class =right> Hello Stack Overflow< / div> 
< / div> 
  

CSS：

 code> .wrapper {
 border：1px solid black; 
 width：400px; 
} 
 .left {
 border：1px solid green; 
 display：inline-block; 
} 
 .right {
 border：1px solid red; 
 display：inline-block; 
 float：right; 
} 
  

我想强制绿色的宽度 div 尽可能大，根据红色的宽度。红色 div 的宽度可根据 div 的内容而有所不同。因此，例如，如果红色 div 的宽度为150px，则绿色宽度应为250px。这应该始终是真的：

 绿色div宽度+红色div宽度= 400px 
  
 
 
 
如何使用CSS实现这个功能？
 
 
 
 > 
 
解决方案
正如sandeep先前所说，但强迫绿色div占用尽可能多的空间。
  .wrapper {
 border：1px ; 
 width：400px; 
 display：table; 
} 
 .left {
 border：1px solid green; 
 display：table-cell; 
 width：100％; 
} 
 .right {
 border：1px solid red; 
 display：table-cell; 
} 
  
请注意，IE7及以下版本不支持divs-as- / p> 
Consider the following example:

HTML:
<div class="wrapper">
    <div class="left">Some text here</div><div class="right">Hello Stack Overflow</div>
</div>
CSS:
.wrapper {
    border: 1px solid black;
    width: 400px;
}
.left {
    border: 1px solid green;
    display: inline-block;
}
.right {
    border: 1px solid red;
    display: inline-block;
    float: right;
}
I would like to force the width of the green div to be as big as possible, according to the width of the red one. The width of the red div can vary according to div's content. So, for example, if the width of the red div is 150px, the width of the green one should be 250px. This should always be true: 
green div width + red div width = 400px
How could I achieve this using CSS ?

No Javascript please...
解决方案
As sandeep said earlier, but force the green div to take up as much space as possible.
.wrapper {
    border: 1px solid black;
    width: 400px;
    display:table;
}
.left {
    border: 1px solid green;
    display: table-cell;
    width: 100%;
}
.right {
    border: 1px solid red;
    display: table-cell;
}
Note that divs-as-tables is not supported by IE7 and below.

                        
这篇关于如何使用CSS自动调整div的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！