Question

我有一个包含许多标签的html页面。我尝试使用css设置样式的是article和nav。

<html>
<body>
    <article>(many article inside ths article)</article> 
    (many tags here) 
    <nav></nav>
</body>
</html>

我正在设计一些标签，但我不知道css好。首先，我必须在我的页面的60％中显示文本，所以我这样做并且它有效：

body{width: 60%;}

然后我必须在我的主要文章的左侧显示我的导航，但它也必须是我的页面内容的20％宽度（和我的文章其余的宽度）。我设法做到这一点，但我有下一个问题：

article ~ nav{position: fixed;left: 0px;top: 7%; width: 20%;}

问题是当我调整浏览器大小时。导航的位置正在发生变化。我需要将它固定在我文章的左边，宽度为20％。我被允许只更改css文件。 html标签没有类或id。我设法用bootstrap来做，但我需要在没有引导网格系统的情况下完成它。

Answer 1

从下面的评论中，您应该尝试一下：

使用子选择器>选择作为body标记的直接后代的标记，并将padding-left添加到这些标记中。

body {position: relative;}
body > article, body > div {padding-left: 40%;}
nav {position: absolute; left: 0; top: 0; width: 20%}

Answer 2

这就是你想要的东西吗？

<html>
    <head>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
            }
            body {
                position: relative;
                margin: 0 auto;
                width: 60%;
                height: 100%;
            }
            nav {
                position: absolute;
                width: 20%;
                top: 0;
                bottom: 0;
                background: blue;
            }
            article {
                position: absolute;
                width: 80%;
                left: 20%;
                top: 0;
                bottom: 0;
                background: red;
            }
        </style>
    </head>
    <body>
        <article>(many article inside ths article)</article> 
    (many tags here) 
        <nav></nav>
    </body>
</html>

修复响应页面中的元素位置

2 个答案: