修復響應頁面中的元素位置

我有一個有很多標籤的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

修復響應頁面中的元素位置

回答

相關問題