zoukankan html css js c++ java

css布局—— 固定+自适应

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;   //浮动元素是脱离文档流的，所以设置margin-right，不然就会覆盖右边元素。
}
.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>

注：此处用的是固定宽度的div浮动，自适应宽度的div正常文档流中放置，利用margin-right实现布局。

要说明的是: 父元素的宽度不设置的话默认100%啦，没什么好说的。

但是父元素的高度值得一说，应该这么说，父元素的高度遵循的是自适应的子div的高度，所以，如果父元素正好要求如此的话，就没什么问题了。

但是，如果，父元素的高度非要按照浮动的子div的高度或者说当浮动子div比较高，而且父div想要包住子div的话，就需要清除浮动啦！

推荐的当然后是用伪类 :after{content:"";clear:both;display:block;visibility:hidden;height:0px;} {zoom:1}

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;}
.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>

补充于：2015.10.8(9月的最后一天大风大雨地去面试，然后被藐视了。。不过呢，还是有收获的！)

利用position中的脱离文档流的性质来实现的

<!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-top : 10px;
}
.aside { 
    width :200px; 
    border:3px solid red;
    position:absolute;
    right:5px;           //绝对定位在靠右边
}
.content {
    height : 600px;
    border : 3px solid purple;
    margin-right : 210px;       //空出一部分位置给right的div，虽然它不占文档流，但是障眼法啦
}
.footer { text-align : center; border : 3px solid blue;margin-top:10px;}
</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>

position中默认的值是static，占据文档流。

absolute ， fixed都是脱离文档流的，absolute是相对于position不为static的最近父元素定位直至document。

fixed是相对于浏览器定位的，并且随着浏览器屏幕的变小，会出现滚动条。

relative是占据原来的文档流的。　

这种方法不用float算是一个优点，但是父div无法捕捉到position为absolute的高度，这个算缺点啦，一般少用绝对定位吧。。。

查看全文

相关阅读:
操作系统（32-45）
异或运算( ^ )
计算机网络（16—30）
操作系统（13-30）
win7 linux双系统删除linux
ubuntu安装matplotlib包
 vmware+CentOS 7 无法上网
 Python命令行清屏的简单办法
 jupyter notebook 工作目录修改
 ipython notebook设置工作路径和自动保存.py文件 ipython_notebook_config.py

原文地址：https://www.cnblogs.com/shixiaomiao/p/4821270.html