浮動：左屬性

在我的網頁，當我使用浮動：左側爲導航欄按鈕（排隊水平），它使內容之後向右移動，如：浮動：左屬性

[ Home About More ] 
        Text

我想要它是：

[ Home About More ] 
Text

有什麼建議嗎？

來源

2012-10-04 Pats101

看起來像你需要一個clearfix，你可以張貼代碼？ – Kyle

你可以嘗試使用每個元素的一個div，將兩個div都浮動到左邊，並將div的寬度設置爲主div的寬度 – macken88

您需要使用clear屬性的文本。像這樣：

.text {clear:left}

來源

2012-10-04 13:19:57

我知道，我只是很累！非常感謝你！ – Pats101

使用clearfix解決方案來解決問題。

http://themergency.com/css-clearfix-demystified/

UPDATE：在CSS文件中，添加以下內容：

.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; }

然後在你的HTML中，clearfix類添加到浮動元素的父容器。不知道你的HTML標記是什麼樣子，但它可能是沿着與clearfix解決東西線：

<div class="clearfix"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">More</a></li> 
    </ul> 
</div>

來源

2012-10-04 13:20:01 dspencer

這是一個很常見的問題，我建議定義，像這樣

.clear {clear:both;}一個css入門

然後在未來，您可以簡單地將此類添加到需要清除上述浮動元素的元素，或者只需像這樣添加一個空的div。

<div class="clear"></div>

來源

2012-10-04 13:24:28 Wez

這是解決問題的「老派」方法，這也適用，但不是最佳實踐，因爲您要添加額外（空白）HTML標記來修復定位/佈局問題。您應該使用純粹的CSS解決方案將其解決爲IMO的最佳實踐。 – dspencer

我同意有空的標記是不好的做法，但是，有一個可重用的類不是。 – Wez

如何使用RE-USABLE CSS類沒有更高的效率和最佳實踐？您減少了不必要的HTML標記，並且您正在使用最有可能多次使用的類？添加空的HTML標籤效率不高。國際海事組織，一個可重用的班級是最好的方式。 – dspencer

還是這個工程（溢出招）：

<div style="overflow:auto"> 
    <div style="float:left">[ Home </div> 
    <div style="float:left">About </div> 
    <div style="float:left">More ]</div> 
</div> 
Your other text

來源

2012-10-04 13:25:21

浮動：左屬性

回答

相關問題