css布局

时间：2015-09-21 12:16:16 阅读：303 评论：0 收藏：0 [点我收藏+]

css切图还是蛮难的！

实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200px

这题难点在于content自适应（对于我来说是难点。。。）

两种解法：

1.float为right，aside的div在content的前面，content不设置float，

这里有个小问题：如果content也设置float:right，则宽度就不是自适应了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict //EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css"> 
div { padding : 0px;}
.header { border : 3px solid green;padding : 10px;position:relative;}
.header:after {
    content : "";
    clear : both;
    display : block;
    visibility : hidden;
    height : 0;
}
.header {
    zoom : 1;
}

.logo {
    float : left ;
    width : 100px;
    height : 100px;
    border : 3px solid red;
}
.user {
    float : right ;
    width : 200px;
    border : 3px solid #000;
    text-align : right;
    position : absolute;
    bottom:10px;
    right : 10px;
}
#content { margin : 10px 0;}
#content:after {
    content : "";
    clear : both;
    display : block;
    visibility : hidden;
    height : 0;
}
.aside { 
    width :200px; 
    margin-left : 25px;
    border:3px solid red;
    float : right;
}
.content {
    height : 600px;
    border : 3px solid purple;
    margin-right : 220px;
}
.footer { text-align : center; border : 3px solid blue;}
</style>
</head>
<body>
<div class = "header">
   <div class = "logo">Logo</div>
   <div class = "user"> <span>用户名 </span></div>
</div>
<div id = "content">
    <div class = "aside">aside - 定宽 200px</div>
    <div class = "content">content - 自适应宽度</div>
</div>
<div class = "footer">footer</div>
</body>
</html>

2.两层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict //EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css"> 
div { padding : 0px;}
.header { border : 3px solid green;padding : 10px;position:relative;}
.header:after {
    content : "";
    clear : both;
    display : block;
    visibility : hidden;
    height : 0;
}
.header {
    zoom : 1;
}

.logo {
    float : left ;
    width : 100px;
    height : 100px;
    border : 3px solid red;
}
.user {
    float : right ;
    width : 200px;
    border : 3px solid #000;
    text-align : right;
    position : absolute;
    bottom:10px;
    right : 10px;
}
#content { margin : 10px 0;}
#content:after {
    content : "";
    clear : both;
    display : block;
    visibility : hidden;
    height : 0;
}
.left {
    float : left;
    width:100%;
}
.aside { 
    width :200px;
    margin-left : -206px;   //这句好关键啊！！！
    border:3px solid red;
    float : left;
}
.content {
    height : 600px;
    border : 3px solid purple;
    margin-right : 220px;
}
.footer { text-align : center; border : 3px solid blue;}
</style>
</head>
<body>
<div class = "header">
   <div class = "logo">Logo</div>
   <div class = "user"> <span>用户名 </span></div>
</div>
<div id = "content">    
    <div class = "left">
        <div class = "content">content - 自适应宽度</div>
    </div>
    <div class = "aside">aside - 定宽 200px</div>
</div>
<div class = "footer">footer</div>
</body>
</html>

css布局

原文：http://www.cnblogs.com/shixiaomiao/p/4821270.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)