我正在尝试布局网站:
http://kenzshop.com/Brandon/index
我无法正确对齐主要内容区域(蓝色)。
标题(红色)有流体,侧边栏(黄色)有流体高度,主要内容区域应该是流体宽度和高度,但我无法弄清楚如何使其正确对齐。
它应与标题宽度对齐。
任何人都可以看到我的问题是什么吗?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"></meta>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"></meta>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="main"><!--<iframe src="http://www.cnn.com/"/> --></div>
<div id="sidebar"></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#header{
height: 80px;
border: 1px solid black;
padding: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color:red;
}
#main{
position:absolute;
left:0;
top:90px;
right: 263px;
padding:0;
margin-top: 12px;
margin-left: 5px;
margin-bottom:5px;
height:99% !important; /* works only if parent container is assigned a height value */
width:100%;
border:1px solid black;
background-color:blue;
}
iframe{
margin: 5px;
display:block;
width:100%!important;
height:100%!important;
}
#sidebar{
position:absolute;
right:0;
top:102px;
padding:0;
margin-right:5px;
margin-bottom:5px;
width:250px;
height:99%; /* works only if parent container is assigned a height value */
border:1px solid black;
background-color:yellow;
}
答案 0 :(得分:2)
这样的东西?
HTML:
<div id="header"></div>
<div id="main"></div>
<div id="sidebar"></div>
CSS:
#header {
height: 60px;
background: red;
margin-bottom: 10px
}
#main {
width: 68%;
background: blue;
float: left;
height: 800px;
}
#sidebar {
width: 30%;
background:yellow;
float: right;
height: 800px;
}
P.S。不确定是否根据您当前的网站或发布的图片,因为两者似乎都遵循不同的概念。现在是图像。
答案 1 :(得分:2)
由于它们几乎没有变量,因此可以依靠position: absolute
轻松解决,而不会影响灵活性。
HTML:
<header class="header"></header>
<div class="content">
<iframe src="http://www.cnn.com/"></iframe>
</div>
<div class="sidebar"></div>
CSS:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header,
.content,
.sidebar {
position: absolute;
border: 1px solid black;
}
.header {
top: 5px;
right: 5px;
left: 5px;
height: 80px;
background: red;
}
.content,
.sidebar {
top: 90px;
bottom: 5px;
}
.content {
left: 5px;
right: 260px;
}
.content iframe {
width: 100%;
height: 100%;
}
.sidebar {
right: 5px;
width: 250px;
background: green;
}