Skip to content

CSS布局问题总结

经典两栏自适应布局

HTML网页结构如下:

<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
  1. 使用绝对定位。

CSS代码:

.left{background:#ff0088;width:200px;position:absolute;}
.right{background:#0088ff;margin-left:200px;}

2.使用浮动布局

CSS代码:

.left{background:#ff0088;width:200px;float:left;}
.right{background:#0088ff;}

如果让右侧定宽,我们需要把右侧div写在前面:

<body>
<div class="right">
</div>
<div class="left">
</div>
</body>

3.使用负margin方法

本站模板就是使用这个方法,我们需要在右侧栏内新增一个元素,而且需要把自适应的right容器写在前面:

<div class="right">
<div class="rightContent">
</div>
</div>
<div class="left">
</div>

CSS代码:

.left{background:#ff0088;width:200px;float:left;}
.right{background:#ccc;float:right;width:100%;margin-left:-200px;}
.rightContent{background:#0088ff;margin-left:200px;}

参考链接

CSS布局奇淫技巧之-多列等高
CSS 布局经典问题初步整理

插播一个征婚广告~~

也是受朋友之托。

>_<

女,运营妹,23岁,未婚,身高167cm,体重48KG,山东青岛。

目前在阿里巴巴工作,负责支付宝相关业务,工号 519720401 支付宝搜索工号可见照片。

漂亮大方,爱好读书、健身、游泳、吃鸡。

青岛有房一套,有车。

父母退休,家庭不拜金、人务实,一直没有合适的男朋友。

她本人要求不高,只要对她真心好就行。

 

您的赞助将会鼓励作者技术文章创作以及支持本站运维。

发表评论

Your email is never published nor shared. Required fields are marked *


TOP