容器不會漂浮在右邊

我想要做一個非常簡單的事情，讓容器排成另一個容器的右側。出於某種原因，我真的很掙扎。容器不會漂浮在右邊

我做了一個非常基本的小提琴來展示我想要做的事情。

我曾嘗試加入

display: inline; 
float: right;

到

.top_post_out { 
    border: solid 1px #C0C0C0; 
    border-radius: 8px; 
    width: 30%; 
    margin-right: 25px; 
    padding-top: 25px; 
}

除了使它inline-block和許多其他的東西，但它不排隊。

我在做什麼錯？

來源

2015-08-09 Paul

https://jsfiddle.net/Lvoy1dtd/2/

添加「浮動：左」你的第一個容器

rankingTableOut { 
    border: solid 1px #C0C0C0; 
    border-radius: 8px; 
    width: 60%; 
    margin-left: 15px; 
    padding-top: 25px; 
    float: left; 
}

來源

2015-08-09 05:30:45 Tajinder

謝謝。不能相信我沒有嘗試過。 – Paul

這可能會有各種意想不到的副作用，並不是正確的解決方案。你們都應該讓自己熟悉浮標的（有時是困難的）概念。 – connexo

您需要添加display:inline-block;到rankingTableOut類，而不是top_post_out。 Div是默認的塊元素，這會導致它們在它們之後出現換行符。因此，您的下一個元素將浮動到下一個行的右側，而不是您想要的當前行的右側。內聯塊屬性將防止換行，同時保留元素的寬度和高度。

來源

2015-08-09 05:34:38 DLH

浮動元素需要在您的標記之前，或在是應該「漂浮它」的內容開始定義。只需重新排序你的容器就可以解決你的問題，不需要額外的CSS。

<div class="top_post_out"> 
    <p>Make me right</p> 
</div> 
<div class="rankingTableOut"> 
    <p>Make me left</p> 
</div>

https://jsfiddle.net/Lvoy1dtd/3/

你也應該閱讀Understanding floats。

來源

2015-08-09 05:40:24 connexo

容器不會漂浮在右邊

回答

相關問題