[英]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.