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

2018-03-30 来源:网页教学网 作者:佚名 点击: 评论:
新进的公司,接触新的东西,一切都让我倍感紧张。很久没有接触设计的东西了,突然上手就要做界面,心里还是很忐忑的。
CSS教程实例:关于网页的两列布局

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

贴一下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基础的好。挫败感。

文章转载请注明来自天晟网络 > 设计教程 > css技巧 >
标题:CSS教程实例:关于网页的两列布局
网址:http://www.timsion.com/css/17304.html

关键词:天晟网络 网页 布局 实例 CSS教程

上一篇:CSS3:文字阴影知多少
下一篇:使用css给图片添加阴影入门篇

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。