DIV+CSS一行两列布局
以下是说明:
CSS代码: .main{width:800px;/* 总的宽度 */ background:red; } .main .col1{ float:left;/* 这个是关键的地方 让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等) */ width:300px;height:300px; background:#eee;border:1px solid #ccc; } .main .col2{ float:left;/* 这个是关键的地方 让col2也往左浮动,紧跟在col1的后面 */ margin-left:5px;/* 让col2和col1之间有些间隔 */ width:490px;height:300px;/* 给一个尺寸 可以随意*/ background:#ddd; border:1px solid #ccc; } .clear-float{clear:both}/* 清除col1和col2的float,否则main的高度会出错 没有包住它里面的有float的元素。 */ HTML结构: < div class="main">main < div class="col-1">col1< /div> < div class="col-2">col2< /div> < div class="clear-float">clear-float< /div> < /div>
- <style type="text/css">
- body{font-size:12px;}
- .main{width:800px;/* 总的宽度 */
- background:yellow;
- }
- .main .col-1{
- float:left;/* 这个是关键的地方 让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等) */
- width:300px;height:300px;
- background:#eee;border:1px solid #ccc;
- }
- .main .col-2{
- float:left;/* 这个是关键的地方 让col2也往左浮动,紧跟在col1的后面 */
- margin-left:5px;/* 让col2和col1之间有些间隔 */
- width:490px;height:300px;/* 给一个尺寸 可以随意*/
- background:#ddd;
- border:1px solid #ccc;
- }
- .clear-float{clear:both}/* 清除col1和col2的float,否则main的高度会出错 没有包住它里面的有float的元素。 */
- </style>
- <div class="main">main 我是包在外面的div
- <div class="col-1">col1 我是第一列</div>
- <div class="col-2">col2 我是第二列</div>
- <div class="clear-float">clear-float;我用来清除浮动(清除float)</div>
- </div>
转载于:https://www.cnblogs.com/cnyyl/archive/2007/08/12/852628.html
DIV+CSS一行两列布局相关推荐
- DIV+CSS三行两列经典布局
师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应.完整代码如下(在阿捷的代码基础上作了部分修改): < ...
- html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
- HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...
摘要 腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...
- CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- html5+css 两列布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- CSS布局之两列布局
两列布局 两列布局一般情况下是指定宽与自适应布局,两列中左列是确定的宽度,右列是自动填满剩余所有空间的一种布局效果: 左列自适应, 右列定宽 float + margin 属性实现: float + ...
- CSS圣杯布局常用吗,CSS 经典三列布局之圣杯布局
圣杯布局 圣杯布局是典型的 CSS 布局问题,有着众多的解决方案. 圣杯布局是一种非常经典和常用的布局方式,其所指的是三列布局,中间宽度自适应,两边定宽:或者两列布局,主体宽度自适应,左边或右边定宽. ...
最新文章
- 偏见与人类大脑结构有关
- 从贫困的“问题少年”到计算机博士,最后成为商界泰斗,“创业之神”吉姆•克拉克是如何走向封神之路的?...
- DIV焦点事件详解 --【focus和tabIndex】​
- 系统调优一之内存子系统
- 重磅!!面试季--最新面试题总结出厂,附题解,后期持续分享!
- C++Addition rule of probabilities概率加法法则算法(附完整源码)
- gitlab git clone 卡住_gitlab从入门到绝望
- hdu 3836 Equivalent Sets
- Android 系统(149)---如何初步定位异常关机问题
- 用汇编的眼光看C++(之算术符重载)
- android多点触控
- Git 合并代码操作失误,Rebase current,导致拉取代码一直冲突
- wifi密码本 字典(免费)
- JS常用字符串方法复习
- 2020年度十大高薪岗位出炉,程序员霸榜!
- python实现RSA数字签名(纯算法实现)
- 总结之:CentOS 6.5 MySQL/MariaDB日志及事物详解和基本操作语句
- 解析彼岸图网图片—xpath简单应用
- 我的奇思妙想机器人消防员_我的奇思妙想——睡眠机器人-三年级作文
- P1023 税收与补贴问题