簡體   English   中英

html 頁面中 aside 的定位問題

[英]Problem with the positioning of an aside in an html page

一周前,我開始學習 html 和 css,為了練習,我決定用我目前學到的知識模擬一個舊的 web 頁面。 該頁面如下: http://in3.org/info/reading.htm我很難使頁面右側的藍色垂直線出現。

代碼:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ELECTRIC PAGES Reading Notes</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <main>
      <header>
        <img src="assets/ga.gif" alt="" />
        <br>
        <img src="assets/eptype2.gif" alt="" />
      </header>
      <aside class="aside1">
        <img src="/assets/epnav5.gif" alt="" />
      </aside>
      <h2>Reading Notes</h3>
      <aside class="aside2"></aside>
    </main>
  </body>
</html>
head,
body {
  background-color: lightcyan;
  margin: auto;
}

header {
  width: 100%;
  padding-left: 4.85%;
  margin: auto;
}

.aside1 {
  position: absolute;
  width: 4.85%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

.aside2 {
  position: absolute;
  width: 4.85%;
  padding-right: 30%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

img {
  padding: 10px;
}

h2 {
  color: red;
  padding-left: 5.5%;
}

為了制作那條藍色垂直線,我想到了使用寬度為 4.85% 且 padding-right 為 30% 的空白 aside 標簽,但不是向右有 30% 的距離並占用 4.85% 的寬度,aside位於頁面左側,占頁面的 30%。

在此處輸入圖像描述

我只是給包裝器/主體元素你想要的背景顏色,在那個包裝器元素內創建一個新容器,給它你想要的其他背景顏色,然后將它居中。 這樣你就不必制作 2 個新元素。

 * { margin: 0; padding: 0; } body { background-color: lightcyan; }.wrapper { background-color: rgb(35, 168, 221); height: 100vh; max-width: 75%; }.container { background-color: lightcyan; max-width: 80%; height: 100%; margin-left: auto; margin-right: auto; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>ELECTRIC PAGES Reading Notes</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <main> <div class="wrapper"> <div class="container"> <h2>Reading Notes</h3> </div> </div> </main> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM