1个回答
展开全部
1使用绝对定位法实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>箭袋树 为自由旅行</title>
<meta name="Keywords" content="箭袋树,quivertree,自助行,高端自助行">
<meta name="Description" content="北京箭袋树文化发展有限公司 - Quivertree">
<style>
.main{
position:relative;
height:500px;
}
.sidebar{
position:absolute;
left:0;
width:30%;
height:100%;
}
.content{
position:absolute;
right:0;
width:70%;
height:100%;
}
</style>
</head>
<body>
<header>这是header</header>
<div class="main">
<div class="sidebar">这是sidebar</div>
<div class="content">这是content</div>
<div class="clear"></div>
</div>
<footer>这是footer</footer>
</body>
</html>
2使用浮动法实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>箭袋树 为自由旅行</title>
<meta name="Keywords" content="箭袋树,quivertree,自助行,高端自助行">
<meta name="Description" content="北京箭袋树文化发展有限公司 - Quivertree">
<style>
.main{
position:relative;
height:500px;
}
.sidebar{
float:left;
width:30%;
height:100%;
}
.content{
float:right;
width:70%;
height:100%;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<header>这是header</header>
<div class="main">
<div class="sidebar">这是sidebar</div>
<div class="content">这是content</div>
<div class="clear"></div>
</div>
<footer>这是footer</footer>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
