site topic网站专题
首页
>
网站专题
>
专题详情
分享新闻到:

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

互诺科技:2009-11-01 00:00     阅读数:       标签:

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

贴一下Card的这个界面。

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

搜索了下,得到如下结果

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

.right { } 可不用定义

但这样的话,就有几个问题:

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

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

这让我一时摸不到头脑,感觉对css还是知之甚少。最后只有在right的下面套一个100%的table 来解决这个事情。今天早晨来了以后,问同事要了以前partime做的东西,打开研究了一下,发觉,其实这个问题很好解决,上面的问题2也可以一并解决掉!

代码如下:

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

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

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

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