Question

这可能是一个非常简单的问题，但我从未真正做过网络...所以我遇到了麻烦。

我正在尝试使用CSS和HTML5来设置我的简历。我已经为 main aside 创建了一个小课程，我打算用它来放置与主要内容有某种关系的东西，比如我们游戏艺术家在页面中的新官方艺术品关于新游戏的游戏玩法，或游戏角色的链接等。

我还想最终重用其他容器中的aside元素，例如导航栏，在每个页面上都有一个特殊的元素，明确地将其他导航链接分开。

然而，虽然后一部分有效，但第一部分失败了。我认为将rightpane类应用到我的aside元素会重置左侧的位置，当我认为它将应用 float：right 规则然后绝对定位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>

Answer 1

我创造了一个小提琴：http://jsfiddle.net/jasongennaro/StuPB/但是很难说这里发生了什么，因为我们错过了你的一些CSS。

在任何情况下，position和float都不能以您的思维方式共存......所以一个人会覆盖另一个。

如果您希望.rightpane保持正确，那么您需要在css中添加right:0px（或其他一些合适的px /％/等），例如

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/

为什么我的盒子没有显示在右边？

1 个答案: