查看: 6657|回复: 0
打印 上一主题 下一主题

DIV+CSS一行两列布局

[复制链接]
跳转到指定楼层
1#
发表于 2007-9-18 16:11:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
台州网址导航
<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>
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享 分享淘帖
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

网站推广
关于我们
  • 台州朗动科技(Tzweb.com)拥有多年开发网站平台系统门户手机客户端等业务的成功经验。主要从事:政企网站,系统平台,微信公众号,各类小程序,手机APP客户端,浙里办微应用,浙政钉微应用、主机域名、虚拟空间、后期维护等服务,满足不同企业公司的需求,是台州地区领先的网络技术服务商!

Hi,扫描关注我

Copyright © 2005-2026 站长论坛 All rights reserved

Powered by 站长论坛 with TZWEB Update Techonolgy Support

快速回复 返回顶部 返回列表