我试图解决这个问题。它说:
我需要编写执行以下操作的CSS代码:
•旁边:500像素宽
•居中75%的浏览器窗口
•页脚底部
这是我的HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Welcome to Our Site</title>
<!-- google font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<!-- style css -->
<style>
body {
background-image: url('super_hero.png');
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 75%;
margin: auto;
height: 100%;
background-color: activeborder;
position: relative
}
#body {
padding: 10px;
padding-bottom: 30px;
/* Height of the footer */
min-height: calc(100% - 60px);
}
.heder {
width: 100%;
height: 30px;
background-color: antiquewhite
}
.footer {
width: 100%;
height: 30px;
background-color: beige;
}
.aside {
width: 500px;
float: right;
}
.section {
height: 100%;
float: left;
width: calc(100% - 500px);
}
</style>
</head>
<body>
<div class="container">
<div class="heder">
</div>
<div id="body">
<div class="section">
<p>section</p>
</div>
<div class="aside">
<p>aside section</p>
</div>
</div>
<div class="footer">
<p>this is footer</p>
</div>
</div>
</body>
</html>
&#13;
但是,我得到了一个看起来不像问题的非常棒的输出。有人可以帮忙吗?
答案 0 :(得分:0)
试试这个https://jsfiddle.net/06h0fcd1/
<强> HTML 强>
<div class="wrapper">
<div class="header">Header</div>
<div class="main">
<div class="section">Section</div>
<div class="aside">Aside</div>
</div>
<div class="footer">Footer</div>
</div>
<强> CSS 强>
body {
background: #FACD8A;
font-size: 20px;
font-weight: bold;
}
.wrapper {
width:75%;
margin: 0 auto;
background: white;
border: 2px solid #CCCCCD;
}
.main {
height: 90vh;
}
.section {
float: left;
display: inline-block;
padding: 15px 25px;
height: 100%;
}
.aside {
padding: 15px 25px;
border-left: 2px solid #FACD8A;
height: 100%;
width: 500px;
float: right;
}
.header, .footer {
padding: 15px 25px;
}
.header {
border-bottom: 2px solid #FACD8A;
}
.footer {
border-top: 2px solid #FACD8A;
}
答案 1 :(得分:-1)
https://jsfiddle.net/jz66L8k4/
看看#table
它最重要的部分
同时尝试调整大小以确保旁边总是500px宽。
顺便说一句。我认为你的背景图片应该在图片文件夹里面!