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

我有一个有很多标签的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做到了，但我需要在没有引导网格系统的情况下做到这一点。

来源

2015-04-17 MyUserQuestion

将'top'设置为百分比时，它会随着窗口大小的变化而上下移动。 – Shaggy

'nav'总是在左边。问题在哪里？当然这是重叠的文章的文字，但我不知道你的意图。 – mkutyba

从下面的评论，那么你应该试试这个：

使用子选择>选择是body标签的直系后裔的标签，并添加padding-left那些。

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

来源

2015-04-17 10:30:14 Aaron

是的，但我只允许更改css文件。 html标签没有类或id属性。我无法创建一个包装容器并在我的html页面中设置一个id – MyUserQuestion

在这种情况下，我更新了我的答案，请使用子选择器。 – Aaron

做完了，谢谢！ – MyUserQuestion

这是这样的东西你想要什么？

<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>

来源

2015-04-17 10:32:01

是的，但我只允许更改css文件。 html标签没有类或id属性。我无法在我的html页面中创建一个包装容器:( – MyUserQuestion

好的，看一下那个代码（它没有太多变化......） –

是的，谢谢。 – MyUserQuestion

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

回答

相关问题