Question

我有这样的事情：

<div class="wrap">
     <div class="first">Example</div>
     <div class="second">
         <div class="inner"></div>
     </div>
</div>

“wrap”具有宽度（100％或1000px）

“inner”有高度和border-bottom

我想像这样扩展“第一”和“第二”

|==================== 1000px or 100% ======================|

Example_____________________________________________________

如果我将宽度添加到“第一”和“第二”，它看起来很好：

|==================== 1000px or 100% ======================|

Example_____________________________________________________

但是如果示例文本更改为更长时间，则包装：

|==================== 1000px or 100% ======================|

Another_____________________________________________________
Example
and
text

但如果“第一”和“第二”没有宽度，“第二个是不可见的：

|==================== 1000px or 100% ======================|

Example

怎么做？

编辑：

来自：

Expand a div to take the remaining width

有效，例如：

<html>
<head>
<style type="text/css">
div.box { background: #EEE; height: 100px; width: 500px; }
div.left { background: #999; float: left; height: 100%; width: auto; }
div.right { background: #666; height: 100%; }
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }
</style>
</head>
<body>
<div class="box">
   <div class="left">Tree</div>
   <div class="right">View</div>
   <div class="clear" />
</div>
</body>
</html>

Answer 1

听起来你正在寻找最小宽度：

http://css-tricks.com/almanac/properties/m/min-width/

这将设置最小宽度而不使该宽度达到最大值。

Answer 2

这可能就是你所需要的。

overflow:auto; and a max-height

http://jsfiddle.net/2hFs5/

如何扩展div？

2 个答案: