爲什麼我的盒子不顯示在右邊？

這可能是一個非常簡單的問題，但我從來沒有真正做過網絡......所以我對CSS有麻煩。爲什麼我的盒子不顯示在右邊？

我在嘗試使用CSS和HTML5設計我的簡歷。我已經爲我的主要旁邊創建了一個小班，我打算使用這個小組作爲放置與主要內容相關的內容的地方，例如我們的遊戲藝術家的新官方藝術品在關於新遊戲的遊戲內容的頁面中或指向遊戲角色的鏈接等。

我還希望最終在其他容器（例如導航欄）中重用aside元素，以便在每個頁面上都有一個特殊的元素，這些元素明顯地與其他導航鏈接分開。

然而，雖然後者工作，第一次失敗。我認爲將rightpane類應用到我的aside元素會將位置重置爲左側，當我認爲它將應用規則規則，然後從頂部絕對定位20％。

我的理解是否正確？
如果我添加一個右側：5％的規則到旁邊的元素樣式，然後我的盒子以某種方式顯示在我想要的位置，但它是一個預先確定的位置，而不是讓它漂浮在右邊，這看起來很糟糕？

那我該怎麼辦？

aside { 
text-align: right; 
float: right; 
} 

.rightpane { 
text-align: right; 
overflow: scroll; 
visibility: visible; 
position: absolute; 
max-width: 20%; 
top: 20%; 
}

我用在看起來這種方式代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="../Presentation/CSS/main.css" /> 
<title> 
Minus and Brains, Inc. 
</title> 
</head> 
<body> 
<nav id="navBar" class="center"> 
<ul> 
<li> 
<a href="wtf.html">WTF</a> 
</li> 
<li> 
<a href="Cheese.html">Cheese</a> 
</li> 
<aside> 
<li> 
<a href="supertramp.html">Breakfast in America</a> 
</aside> 
</li> 
</ul> 
</nav> 
<article> 
<h2>Plans to conquer the world</h2><time datetime=」2011-09-09T19:31:45+01:00″>9 septembre 2011</time> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</article> 
<aside class="rightpane">09/09/2011<br/>Some brilliant news: Brains finally takes over World!</aside> 
</body> 
</html>

來源

2011-09-10 Kheldar

分享一些樣本標記，以便我們做點什麼。或者最好在[jsFiddle]（http://jsfiddle.net/）上寫一個案例。 – Shef

嘗試從.rightpane刪除'position：absolute'聲明，我不確定這會解決它，但我有一個預感 –

位置：絕對是在這裏，因爲如果我不添加它，該框顯示在右側在文章後面，而我希望它從身體頂部顯示20％，幾乎在導航欄下面，有一點呼吸空間：D – Kheldar

我創建了一個小提琴：http://jsfiddle.net/jasongennaro/StuPB/但很難說什麼是發生在這裏，因爲我們缺少一些你的CSS的。

在任何情況下，position和float不能以您認爲的方式共存...所以一個會覆蓋另一個。

如果你想.rightpane留下正確的，那麼你需要添加一個right:0px（或其他適當的PX /％/等）到你的CSS，像

aside.rightpane { 
    text-align: right; 
    overflow: scroll; 
    visibility: visible; 
    position: absolute; 
    max-width: 20%; 
    top: 20%; 
    right:0%; //ADDITION HERE 
}

更新例如：http://jsfiddle.net/jasongennaro/StuPB/1/

來源

2011-09-10 20:37:55

好吧，我現在明白了：D – Kheldar

完美！很高興幫助@Kheldar。 –

爲什麼我的盒子不顯示在右邊？

回答

相關問題