CSS教程实例：关于网页的两列布局

⊕ 网站首页 ⊕注册会员 ⊕ 本站免费电影 ⊕ 留言板 ⊕ 繁體中文

您现在的位置：陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文

专题栏目

最新热门

最新推荐

相关文章

Adobe Flash CS4 试用版
 Photoshop CS3新特性概览
 腾讯TT4.5版发布 RSS可订
 Win Live Messenger 安全
 Adobe Illustrator CS3蓄
 闪客一族看过来 FlashCS
Live Messenger8.2支持多
 雅虎发布Messenger 9.0正
 最大规模 Adobe CS4套装
 Adobe Photoshop CS4最新

CSS教程实例：关于网页的两列布局

CSS教程实例：关于网页的两列布局

作者：陈鹏文章来源：eNet 点击数：更新时间：2009-9-12 2:52:19

新进的公司，接触新的东西，一切都让我倍感紧张。很久没有接触设计的东西了，突然上手就要做界面，心里还是很忐忑的。

　　贴一下Card的这个界面。

　　

　　以前很少使用这类的总宽度自适应100%，两列布局，一列固定，一列自适应的，于是，有点头大。

　　搜索了下，得到如下结果

　　.left { width:180px; float:left }

　　.right { } 可不用定义

　　但这样的话，就有几个问题：

　　1.在dw里面，right部分会延伸到整个屏幕，虽然在浏览器里是正确的，这样程序做起来可能会困惑。。

　　2.就是如果里面有不定义width的div存在，这个div就不会自动平铺背景，形成如下情况。

　　 CSS

　　这让我一时摸不到头脑，感觉对css还是知之甚少。

　　最后只有在right的下面套一个100%的table 来解决这个事情。

　　今天早晨来了以后，问同事要了以前partime做的东西，打开研究了一下，发觉，

　　其实这个问题很好解决，上面的问题2也可以一并解决掉！

　　代码如下：

　　.left { width:180px; float:left }

　　.right{ margin:0 0 0 180px;}

　　其实就是简单的把right的左边距设为left的宽度即可。唉。

　　我还是好好看看css基础的好。挫败感。

　　

文章录入：陈鹏责任编辑：陈鹏

上一篇文章：判断域名被百度降权的种种迹象

下一篇文章：实例：分析关键词的选取技巧

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】