css回顾之左侧宽度自适应布局
2024-08-27 12:07:27
目标:
![屏幕快照 2018-03-13 上午11.36.06](http://ozfuwp2os.bkt.clouddn.com/屏幕快照 2018-03-13 上午11.36.06.png)
<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
<title>alibaba</title>
<style type="text/css">
.main{
margin: 5px;
overflow: hidden;
/* border: 1px solid #000;*/
}
.column{
border: 1px solid #000;
}
.left{
float: left;
width: 100%;
}
.right{
float: left;
width: 200px;
margin-left: -204px;
}
.real{
margin-right: 210px;
border: 1px solid blue;
height: 300px;
}
</style>
</head>
<body>
<div class="main">
<div class="left column">
<div class="real">content - 自适应宽度</div>
</div>
<dis class="right column">aside - 定宽200px</div>
</div>
</body>
</html>
第一步:两个div设置固定高度,右边的设置固定宽度,并且都float:left;
第二步:右边的div设置固margin-right,让它能和左边的div并排显示;
第三步:在左边的div中再添加一个小div#real,由它来撑开div#left 设置margin-right,值为div#right的宽
主要思想——借鉴双飞翼布局!
最新文章
- Echarts3 关系图-力导向布局图
- C++STL - 类模板
- Winform程序Chrome内核 WebBrowser 控件
- iOS中的过期方法和新的替代方法
- 第二次作业——C++学习
- GetDlgItem
- this compilation unit is not on the build of a java project
- Android ListView中 每一项都有不同的布局
- HDU-2521 反素数
- Linux----给一个普通用户root权限
- 《深入理解OSGi:Equinox原理、应用与最佳实践》笔记_2_建立开发环境
- [置顶] 学习JDK源码:编程习惯和设计模式
- sublime text3 用法
- 1-1 struts2 基本配置 struts.xml配置文件详解
- 笔记:Spring Cloud Eureka 服务发现与消费
- redis备份与恢复
- 使用特性将数据库返回的datatable转换成对象列表
- GDI+_入门教程【一】
- linux下的音量控制器alsamixer 桌面v7
- Derek解读Bytom源码-protobuf生成比原核心代码