CSS浮動div不工作如所示

我有一個容器div叫main，然後兩個div浮動左。問題是我需要可見的主要div背景顏色（我認爲藍色背景應該在右側（300px仍然存在）和中等div的第4行可見，因爲它是比左側div低的div ）。我還需要左和中div來自動增加文字換行的高度，並且您可以看到它在灰色（中間）div中不起作用。CSS浮動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>

來源

2014-10-31 Lukáš Ježek

添加一個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>

來源

2014-10-31 21:38:13 chdltest

哇，非常感謝你，這正是我想如何它的工作 – 2014-10-31 21:40:35

很好，我沒有注意到一個問題依然存在，那就是在文本的溢出灰色div（中）。如何強制它增加高度而不是溢出到正確的位置？ – 2014-10-31 21:48:01

編輯答案並提供了一個新的jsfiddle鏈接。 – chdltest 2014-10-31 21:51:00

你要清楚彩車否則父崩潰的邊緣，似乎沒有爲父高度。

有用於清除浮動的各種技術，你可以找到更多與一個簡單的搜索

至於文字環繞，因爲你已經發現了長文本字符串本身不能打破。

您可以使用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>

來源

2014-10-31 21:42:29

CSS浮動div不工作如所示

回答

相關問題