CSS入门问题，如何自适应宽度，求助高手看看

dukcho 2016-11-02 03:32:33

学习CSS，抄书上的代码，效果却与书上不同，十分苦恼，求助高手指点。

具体问题是这样：这是一个带头和尾，中间分三列的布局，中间的第一和第三列固定，第二列可以自适应宽度，但是实际效果却不是这样，盼高手指点一二：

源码为HTML和CSS，如下：

HTML：
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>
Sample Layout
</title>
<link href="layout.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<h1>TTTTTEST</h1>
<div id="header">Header</div>
<div id="wrapper">
<div id="content">
<h1>Content<h1>
<p>ssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddllllllllllllllllllllllllllllll</p>
</div>
<div id="left">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="right">
<strong>SPECIAL FOR YOU</strong><br/>
SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS<br/><br/>
Act Now!
</div>

</div>
<div id="foot">
Copyright information usually goes here.
</div>
</body>
</html>

CSS：

body {
margin:0;
padding:0;
min-width:525px;
}

#header {
float: left;
width:100%;
background-color:#7152F4;
}

#foot {
float: left;
width:100%;
background-color:#7152F4;
font-size:8pt;
font-weight:bold;
text-align:center;
position:relative;
}

#wrapper {
background-color:#cccccc;
float:left;
padding-left:200px;
padding-right:125px;
overflow:hidden;
width:100%;
/*
width:825px;
*/
}

#content {
background-color:#ff00ff;
width:100%;
float:left;
position:relative;
padding-bottom:2000px;
margin-bottom:-2000px;
/*
*/
}
#left {
background-color:#52f471;
width:200px;
float:left;
position:relative;
margin-left:-100%;
right:200px;
padding-bottom:2000px;
margin-bottom:-2000px;
/*

*/
}

#right {
background-color:#f400d5;
width:125px;
position:relative;
float:left;
padding-bottom:2000px;
margin-bottom:-2000px;
margin-right:-125px;
/*

*/
}

#left ul {
list-style:none;
margin:12px 0px 0px 12px;
padding:0px;
}

#left li a:link, #left li a:visited {
font-size:12pt;
font-weight:bold;
padding:3px 0px 3px 3px;
color:#000000;
text-decoration:none;
display:block;
}

#left li a:hover, #left li a:active {
font-size:12pt;
font-weight:bold;
padding:3px 0px 3px 3px;
color:#ffffff;
text-decoration:none;
display:block;
}

...全文

305 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

IMyxuan 2016-11-04

打赏
举报

position:absolute;用top还有left或者right去调整位置，中间那个将width设置为%就好

dukcho 2016-11-03

打赏
举报

大神，能都让左右固定？

just_there_ 2016-11-03

打赏
举报

试试上面这个呢？

just_there_ 2016-11-03

打赏
举报


<!doctype html>
<html>
<head>
<title>三列布局</title>
<style>
body{
	padding:0;
	margin:0;
	background: #ddd;
}
#wrap{
	width:100%;
	height:500px;
	background:#999;
	position:relative;
}
.left{
	width:30%;
	position:absolute;
	height:100%;
	background:#555;
}
.middle{
	margin-left:30%;
}
.right{
	color:#fff;
	position:absolute;
	top:0;
	right:0;
	width:30%;
	height:100%;
	background:#000;
}
</style>
</head>

<body>
<div id='wrap'>
	<div class='left'>lllllllll</div>
	<div class='middle'>mmmmmmmm</div>
	<div class='right'>rrrrrrrrr</div>
</div>
</body>

</html>

dukcho 2016-11-02