Question

我有一个名为main的容器div，然后剩下两个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

你必须清除浮点数，否则父级的边距会崩溃，看起来父级没有高度。

有各种清除浮动的技术，您可以通过简单的搜索找到更多信息

至于文字换行，你发现长文本字符串不会自行中断。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

在主div中添加一个div，但在底部添加一个名为clear：

<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;添加到要包装的内容中。

我已经将自动换行应用于主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>

CSS浮动div不按预期工作

2 个答案: