CSS 3周的div定位，两次与浮动左右

我的HTML代码CSS 3周的div定位，两次与浮动左右

<div style="border:1px solid red; height:140px;"> 
    <div style="width:100px; float:left; border:1px solid blue;"> 
     left 
    </div> 
    <div style="width:100px; float:right; border:1px solid blue; "> 
     right 
    </div> 
    <div style="border:5px solid green;"> 
     middle 
    </div> 
</div>

为什么绿色边框扩散到宽的100％，覆盖左侧和右侧的div？如何解决这个问题，它涵盖了以“中间”开始并在“右”之前结束的唯一块？刚刚试过position:relative;但它没有帮助。

代码的例子是在这里： jsFiddle

来源

2012-09-10 Haradzieniec

写溢出：隐藏它。

<div style="border:5px solid green;overflow: hidden;"> 
      middle 
</div>

入住这http://jsfiddle.net/A6qWE/1/

来源

2012-09-10 08:57:06 sandeep

谢谢！我已经尝试过，但在父div。谢谢！ – Haradzieniec

添加overflow:hidden包含中间的字的div风格

来源

2012-09-10 08:58:05

添加overflow:auto

http://jsfiddle.net/A6qWE/7/检查这个演示

来源

2012-09-10 09:00:13 Sowmya

保证金添加到中间div margin: 0 100px

请参阅示例代码@jsFiddle

来源

2012-09-10 09:01:12

CSS 3周的div定位，两次与浮动左右

回答

相关问题