DIV+CSS模块布局问题

hear_windows 2014-05-16 02:11:42

问题1：
图中的橙色模块和绿色模块的width值都是90%，但是两个模块的显示的长度就是不一样，如果把代码中的position属性去掉，问题倒可以解决，但是我需要用到position:fixed；不知道有什么好的解决方法。

问题2：
图中的黄色模块和灰色模块要如何才能和上下模块对齐。

总体而言都是模块的布局问题，希望懂的朋友能和我一起解决这些问题，谢谢！

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>First html</title>
<link type="text/css" rel="stylesheet" href="css.css">
<head>

<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
----------------------------------------
div {
border-radius: 5px;
}

#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
position:fixed;
margin:auto;
left: 0;
right: 0;
z-index: 1;
}
.left {
width: 25%;
height: 360px;
background-color: gold;
margin-top: 70px;
left: 5%;
position: relative;
display: inline-block;
}
.right {
width: 60%;
height: 360px;
background-color: #A9A9A9;
margin-top: 70px;
right: 5%;
position: absolute;
display: inline-block;
}
#footer {
width: 90%;
height: 50px;
background-color: #00FF00;
margin: auto;
top: 20px;
position: relative;
display: block;
clear:both;
}

...全文

113 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

SweeterThanFiction 2014-05-16

打赏
举报

在样式里加上 *{margin:0 0;} 就行了，因为fixed定位是相对于浏览器窗口的，其他定位相对于原来位置或者父级第一个定位的，默认与浏览器有距离才使他们宽度不一样，一个相对于浏览器窗口，一个相对于body

hear_windows 2014-05-16

打赏
举报

引用 6 楼 A_nonymous 的回复:

添加body {margin:auto}

可以了，谢谢！

hear_windows 2014-05-16

打赏
举报

引用 5 楼 vincentguo_ 的回复:

楼主试下吧，我这已经对齐了


<!DOCTYPE html>
<html>
	<head>
		<title>First html</title>
		<style type="text/css">
		body{
			margin: 0;
		}
		div {
		border-radius: 5px;
		width: 90%;
		}
		#header {
		width: 90%;
		height: 50px;
		background-color: orange;
		overflow: auto;
		position:fixed;
		margin:auto;
		left: 0;
		right: 0;
		z-index: 1;
		}
		.left {
		width: 25%;
		height: 360px;
		background-color: gold;
		margin-top: 70px;
		left: 5%;
		position: relative;
		display: inline-block;
		}
		.right {
		width: 60%;
		height: 360px;
		background-color: #A9A9A9;
		margin-top: 70px;
		right: 5%;
		position: absolute;
		display: inline-block;
		}
		#footer {
		width: 90%;
		height: 50px;
		background-color: #00FF00;
		margin: auto;
		top: 20px;
		position: relative;
		display: block;
		clear:both;
		}
		</style>
		<head>
			<body>
				<div id="header"></div>
				<div class="left"></div>
				<div class="right"></div>		
				<div id="footer"></div>
			</body>
		</html>

行了，谢谢！

A_nonymous 2014-05-16

打赏
举报

添加body {margin:auto}

vincentguo_ 2014-05-16

打赏
举报

楼主试下吧，我这已经对齐了


<!DOCTYPE html>
<html>
	<head>
		<title>First html</title>
		<style type="text/css">
		body{
			margin: 0;
		}
		div {
		border-radius: 5px;
		width: 90%;
		}
		#header {
		width: 90%;
		height: 50px;
		background-color: orange;
		overflow: auto;
		position:fixed;
		margin:auto;
		left: 0;
		right: 0;
		z-index: 1;
		}
		.left {
		width: 25%;
		height: 360px;
		background-color: gold;
		margin-top: 70px;
		left: 5%;
		position: relative;
		display: inline-block;
		}
		.right {
		width: 60%;
		height: 360px;
		background-color: #A9A9A9;
		margin-top: 70px;
		right: 5%;
		position: absolute;
		display: inline-block;
		}
		#footer {
		width: 90%;
		height: 50px;
		background-color: #00FF00;
		margin: auto;
		top: 20px;
		position: relative;
		display: block;
		clear:both;
		}
		</style>
		<head>
			<body>
				<div id="header"></div>
				<div class="left"></div>
				<div class="right"></div>		
				<div id="footer"></div>
			</body>
		</html>

fwings260 2014-05-16