Question

Fiddle
我有两个Div，一个在桌子里，另一个在桌子外面我们的问题是，正如您所看到的，divOne溢出了父Div之外我希望像

一样展示

 ---------------------
|  ----    ----       |
| |    |  | D2 |      |
| | D1 |  |    |      |
| |    |   ----       |
| |    |              | 
|  ----               |
 ---------------------

这是我的代码，

HTML

   <div class="wrapper">
    <textarea rows="12" cols="8" class="divOne">
        Division One
    </textarea>    
    <table>
        <tr>
            <td>
    <textarea rows="6" cols="8" class="divOne">    
     Division Two
     </textarea>    
            </td>
        </tr>        
    </table>    
      </div>

的CSS

.wrapper
{   
    border: 1px solid #999999;
    position: relative;
    margin: 0px;
    padding: 10px;
    width: 600px;
    background-color: #FCFCFC;
    min-height: 50px;
    color: black;
    border-radius: 8px;
    -moz-border-radius: 8px;   
    line-height:normal;     
}

.divOne
{
   float:left;    
}

Answer 1

http://jsfiddle.net/fNhet/1/

.wrapper {
    display: inline-block;
}

Answer 2

那边的问题是你正在使用浮动但是你没有清除

.wrapper:after { /* Using a clearfix */
    display: table;
    content: "";
    clear: both;
}

Demo

因此，父级采用非浮动元素的height ...因此background不会增加。

有关float和clear的详情，请阅读我的回答here和here。

Answer 3

在你的CSS中尝试添加你的.wrapper
CSS： -

overflow:hidden;

DEMO。这样就可以了。

Answer 4

使用display: inline-block; overflow: hidden; width: 50% ..这会给你一些额外的效果

Answer 5

将 display：inline-block; 添加到包装div，然后就可以得到结果......

两个分区的css溢出问题

5 个答案: