如何停止浮動塊周圍的文本？

什麼正如你可以看到文章全文圍繞不談，我已經它的相對移動包裹的當前位置。

下面是相關的CSS：

aside { 
    float: left; 
    z-index: -1; 
    padding: 10px; 
    position: relative; 
    right: 275px; 
    background: linear-gradient(rgb(0,200,0),rgb(0,175,0)); 
    width: 230px; 
    box-shadow: 0px 5px 0px rgb(0,90,0); 
} 

article { 
    padding-left: 20px; 
    padding-right: 20px; 
    text-align: left; 
    background-color: rgb(0,175,0); 
    width: 540px; 
}

我不希望這種事情發生。我已經嘗試了把絕對的位置放在一邊，這是一個解決方案，但是有沒有辦法以這種方式做到這一點？

來源

2014-12-06 NylePudding

不要爲此使用相對定位 – panther 2014-12-06 18:18:45

嘗試使用'position：absolute;改變'aside'的css; left：80px;' – Lal 2014-12-06 18:20:10

我試過，但是我希望它接近中心主文章的左側。就像我試過的一樣。 – NylePudding 2014-12-06 18:27:58

這就是position: relative的工作原理。簡而言之：元素像通常那樣佔據空間，但是相對於其原始位置顯示在指定的左/上位置。

的解決方法是刪除相對定位和使用，而不是負左邊距左/右：

aside { 
    float: left; 
    padding: 10px; 
    background: linear-gradient(rgb(0,200,0),rgb(0,175,0)); 
    width: 230px; 
    box-shadow: 0px 5px 0px rgb(0,90,0); 
    /* remove    */ 
    /* z-index: -1;  */ 
    /* position: relative; */ 
    /* right: 275px;  */ 
    /* insert    */ 
    margin-left: -260px; 
}

來源

2014-12-06 18:23:04

這正是我想要做的，謝謝。我不完全確定負邊距如何工作。 – NylePudding 2014-12-06 18:31:27

負邊距允許元素重疊其他元素（或邊緣，如上例所示）。 – 2014-12-06 18:42:06

我想我會看到它是如何工作的，我只是希望改變邊緣就像會擠壓一切，我猜不是！ :) – NylePudding 2014-12-06 19:01:27

您可以修復使用絕對位置，改變你的風格，以這樣的：

section {position: relative} 
aside {position: absolute; left: -275px; top: 80px;

但是，它只是修復了您的錯誤HTML標記，正確的方法是將兩個元素浮動，即aside和article元素沒有定位。

來源

2014-12-06 18:23:05 panther

如何停止浮動塊周圍的文本？

回答

相關問題