CSS：根據浮動元素

在流體包裝高度我知道這是一個問題，問大概12324次，但我仍然無法找到任何可靠的答案：/CSS：根據浮動元素

這裏是一個示例代碼： http://tinkerbin.com/c0wqtfSa

包裹應該根據浮動圖像採取自動高度，但是如何？：/

非常感謝！

ps的，我不能添加任何額外的格狀「明確：既」，它應該是隻用CSS的解決方案

enter image description here

來源

2011-11-09 designer-trying-coding

嘗試增加

Overflow: auto;

到您的包裝股利，這裏舉例：http://tinkerbin.com/pxFxaNX2

來源

2011-11-09 11:55:54 TalkingQuickly

它看起來像解決方案！在我的Chrome上正常工作。任何交叉瀏覽問題？我需要找一個Windows機器來測試：| –

如果你打算使用overflow：auto ...一定要查看這篇文章，瞭解它的一些缺陷以及如何解決它們。 http://webdesignerwall.com/tutorials/css-clearing-floats-withoverover – luckykind

添加<div style="clear:both"></div>後您的< P>

你需要一個浮動元素後清除...

所以：

<div class="wrap"> 
     <div class="imagefloat"></div> 
     <p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p> 
     <div style="clear:both"></div> 
    </div>

來源

2011-11-09 11:54:34

使用clear:both象下面這樣：

<div class="wrap"> 
    <div class="imagefloat"></div> 
    <p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p> 
    <div style="clear:both;"></div> 
</div>

來源

2011-11-09 11:56:06

你只需要設置溢出以及對您的卷繞寬度div，例如

overflow:hidden

來源

2011-11-09 11:57:01 Brighty

您應該使用clearfix解決方法。閱讀：http://www.webtoolkit.info/css-clearfix.html

你需要的CSS是：

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

然後，只需添加clearfix類的「包裝」的div

來源

2011-11-09 11:58:05 cowls

一個非常容易和快速解決它，使包裝的div也浮動。這將使它自動調整大小更改爲所有浮動元素內，所以：

.wrap { 
    float:left; 
    border:1px solid #000; 
    width: 500px; 
    padding: 20px; 
}

這是否是爲您的項目的選擇依賴於佈局的其餘部分。

來源

2011-11-09 12:14:11

CSS：根據浮動元素

回答

相關問題