CSS浮动div不工作如所示

Question

我有一个容器div叫main，然后两个div浮动左。问题是我需要可见的主要div背景颜色（我认为蓝色背景应该在右侧（300px仍然存在）和中等div的第4行可见，因为它是比左侧div低的div ）。我还需要左和中div来自动增加文字换行的高度，并且您可以看到它在灰色（中间）div中不起作用。

见http://jsfiddle.net/djqfo3we/2/

.main { 
    width: 500px; 
    background-color: blue; 
} 

.left { 
    width: 100px; 
    float: left; 
    background-color: red; 
} 
.middle { 
    width: 100px; 
    float: left; 
    background-color: gray; 
} 

<div class="main"> 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
</div> 

Answer 1

添加一个div里面的主要DIV，但在底部称为明确：

<div class="main"> 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
    <div class="clear"></div> 
</div> 

然后给类清一式：

.clear { 
    clear: both; 
} 

你得到这个：http://jsfiddle.net/djqfo3we/4/

编辑： 正如其他人已经指出，为了应用一个包裹，以便它们保持在设定的宽度尺寸范围内，请将样式word-wrap: break-word;添加到您想包装的内容。

我已经把word-wrap应用到主div的中间和左侧div。

更新的jsfiddle：http://jsfiddle.net/djqfo3we/10/

.main { 
 
    width: 500px; 
 
    background-color: blue; 
 
} 
 

 
.left { 
 
    width: 100px; 
 
    float: left; 
 
    background-color: red; 
 
} 
 

 
.middle { 
 
    width: 100px; 
 
    float: left; 
 
background-color: gray; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.middle, .left { 
 
    word-wrap:break-word; 
 
}

<div class="main"> 
 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
 
    <div class="clear"></div> 
 
</div>

Answer 2

你要清楚彩车否则父崩溃的边缘，似乎没有为父高度。

有用于清除浮动的各种技术，你可以找到更多与一个简单的搜索

至于文字环绕，因为你已经发现了长文本字符串本身不能打破。

您可以使用word-wrap:break-word强制分词，并保留原文不变。

.main { 
 
    width: 500px; 
 
    background-color: blue; 
 
    overflow: hidden;  /* quick clearfix */ 
 
} 
 
.left { 
 
    width: 100px; 
 
    float: left; 
 
    background-color: red; 
 
} 
 
.middle { 
 
    width: 100px; 
 
    float: left; 
 
    background-color: gray; 
 
    word-wrap:break-word; 
 
}

<div class="main"> 
 
    <div class="left"> dsfslfs sfsf slfjks flsdf slf s fs sdf ssdfegrerterte</div> 
 
    <div class="middle">wfwefwef jjjjjjjjjjjjjjjjjj ddddddddddddddddddddddddd</div> 
 
</div>