なぜ私のボックスは右側に表示されませんか？

これはおそらく非常に簡単な質問ですが、私は実際にウェブをしたことはありません...だから、私はCSSに悩まされています。なぜ私のボックスは右側に表示されませんか？

私は、CSSとHTML5を使用して自分のCVのスタイルを設定しようとしています。 のメインクラスのちょっとしたクラスを作成しましたこれは、新しいゲームのゲームプレイに関するページのゲームアーティストからの新しい公式の芸術作品など、主なコンテンツに何らかの形で関連するものを置く場所として使用するつもりです

ナビゲーションバーなどの他のコンテナにも、最終的に他のナビゲーションリンクから離れている特別な要素を持つために、aside要素を再利用したいと考えました。

しかし、後者の部分は機能しますが、最初は失敗します。私はrightpaneクラスを私のaside要素に適用すると、float：rightルールを適用して、上から絶対に20％の位置に配置すると考えたとき、左に位置がリセットされると思います。

私の理解は正しいですか？
私は右の：5％のルールを脇に置いた要素のスタイリングに追加すると、私のボックスは何とかどこにでも表示されますが、右に浮かせるのと比べてあらかじめ決められた位置です。

どうすればよいですか？

<!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'宣言を削除しようとしましたが、これが解決するかどうかわかりませんが、私は勘弁しています –

位置：絶対値はここに追加しないと、、記事の後には、私はそれが呼吸のための少しのスペースで、ほぼnavbarの下にある身体の上から20％を表示したいと思っている間：D – Kheldar

私はフィドル作成：http://jsfiddle.net/jasongennaro/StuPB/を私たちはあなたのCSSの一部が欠けているので、ここで何が起こっているかを伝えるのは難しいです、私はこのように見えるのコードにすることを使用

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

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

。

いずれにしても、positionとfloatは、あなたが考えるように共存できないため、一方が他方を上書きします。

あなたは.rightpaneは、右滞在したい場合は、あなたがright:0px追加する必要があなたの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

OK、私は今それを得る：D – Kheldar

パーフェクト！ @Kheldarを助けてうれしい。 –

なぜ私のボックスは右側に表示されませんか？

答えて

関連する問題