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



相关阅读:
WordPress文章摘要功能简单代码
初学认识一些用PHP开发的博客程序
ASP.NET AJAX 1.0 RC开发10分钟图解
Linux下使用Mplayer播放各种格式的电影
Microsoft SQL Server SA权限安全
php格式化工具Beautify PHP小小BUG
用PHP编程开发“虚拟域名”系统
Tcpdump:Linux下基于命令行的抓包工具
CSS教程:背景background属性应用
JS特效详解:图片幻灯片切换
JSP网站开发环境配置和使用fckeditor
Windows7中IIS日志管理的心得体会
javascript createAdder函数功能与使用说明
jQuery源码分析-03构造jQuery对象-工具函数
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4