总体布局积累(3列)

来源:互联网 发布:排序算法空间复杂度 编辑:程序博客网 时间:2024/05/06 08:30

关键:

1.根包含块:固定宽度width,并设置左右外边距为auto

2.3列块级元素:全部向左浮动,流式布局用%设置宽度,并根据情况设置外边距

效果:

大于根包含块固定宽度自动居中,小于根包含块布局不会缩放

<pre name="code" class="html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.left,.middle,.right{float: left;width: 30%;height:500px;margin: 1%; }.left{background: #9C8ADB;}.middle{background: #88C869;}.right{background: #C17F41;}.content{height: 700px;width:920px;background: #D87777;margin:0 auto;}</style></head><body><div class="content"><div class="left"></div><div class="middle"></div><div class="right"></div></div></body></html>



0 0
原创粉丝点击