CSS布局

来源：互联网发布：编程需要什么样的cpu 编辑：程序博客网时间：2024/05/29 12:47

左固定，右自适应

body里

<div class="leftt"></div><div class="rightt"></div>

第一种（左float右overflow:hidden）

 .leftt {  height: 100px;width: 100px;background-color:#666666;float:left; } .rightt{  height:100px; background-color: yellow; overflow: hidden; }

第二种(左float，右margin-left）

.leftt{ height: 100px;width: 100px; background-color:#666666; float:left; }.rightt{ height:100px; background-color: yellow; margin-left:100px;  }

第三种（左绝对定位，右margin-left）

.leftt{ height: 100px;width: 100px;background-color:#666666;position: absolute; }.rightt{  height:100px;background-color: yellow;margin-left: 100px;}

第四种（都绝对定位）

.leftt{ height: 100px; width: 100px; background-color:#666666;position: absolute; }.rightt{ height:100px;background-color: yellow; position:absolute;left: 100px;width: 100%; }

右固定，左自适应

第一种（左浮动，右浮动，左maigin-left）

.leftt{ height: 100px;width:100%;background-color:#666666;float:left;margin-right: -100px }.rightt{ height:100px;width: 100px;background-color: yellow;float:right; }

第二种（左margin-left，右绝对定位）

.leftt{ height: 100px;background-color:#666666;margin-right: 100px }.rightt{ height:100px;width: 100px;background-color: yellow;position:absolute;right: 0;top: 0 }

第三种（左右都绝对定位）

.leftt{ height: 100px;width:100%;background-color:#666666;position:absolute;left: 0;top: 0;}.rightt{ height:100px;width: 100px;background-color: yellow;position:absolute;right: 0;top: 0 }

阅读全文

0 0