如何处理div+css布局左右浮动问题

  上次分享了《DIV+CSS网页设计制作页面布局技巧分享!》,相信我们对网页布局技巧方面已经有所了解,其实在我们进行div+css网页布局时,还会出现css布局左右出现浮动的问题。这里就在分享下如何处理div+css布局左右浮动问题。
  先看以下代码片段:
  css代码:
  #left{ float:left;width:200px;}
  #right{ float:right;width:800px;}
  页面代码:
  <body>
  <div id="content">
   <div id="left">左边一栏</div>
   <div id="right">右边一栏</div>
  </div>
  </body>
   这是我们css书写使用最常用的代码来进行左右布局。css的书写还有其它的方式,如左侧固定好宽度右侧自动适应。
  左侧固定好宽度右侧自动适应css代码:
  #left{float:left; width:200px;}
  #right{margin-left:200px;}
   上面css的书写是最标准的css的书写,如果在以上的基础上书写的css代码而出现了左右浮动的现象,那就需要检查左右侧里面的代码是否书写规范,</div>此div结尾代码是否多写或少写而导致的。我们只需要注意以上情况,基本就可以解决好div+css布局左右浮动问题了。转载请注明:http://www.ommclean.com

时间: 2025-01-26 20:16:31

如何处理div+css布局左右浮动问题的相关文章

WEB标准教程:Div+CSS布局入门教程

css|web|web标准|教程|入门教程 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

网页设计基础:Div+CSS布局入门教程

css|教程|入门教程|设计|网页|网页设计 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

DIV+CSS布局中的兼容性问题hack做法

DIV+CSS布局中的兼容性问题,除了一些小技巧外,常常还需要结合CSS Hack写法来解决.CSS Hack的原理是针对各浏览器对CSS属性的支持和解析结果不同,以及CSS执行中的优先级问题,来针对不同浏览器写不同的CSS. 1)IE中浮动错位问题 经常,我们定义一个DIV浮动的时候,特别是CSS里有用到margin属性,Mozilla Firefox正常,但是IE中这个DIV会跑到下一行去,解决办法很简单,你只需要在你的CSS属性里加上句:display:inline,如:  代码如下 复制

Div+CSS布局的优点

介绍Div+CSS的优点,阿里西西建议各位朋友,做站时最好采用Div+CSS布局.  业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?       Div 全称 division 意为"区分"使用 DIV 的方法跟使用其他 tag 的方法一样.       <DIV>welcome tu alix

左右两栏div+css布局示例

左右两栏div+css布局示例 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

div+css布局优化中的整体布局

在div+css布局中,一般都这样来整体构架的 <div id="header"></div><div id="center"></div><div id="footer"></div> 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: <div id="header"> <

Div+CSS布局入门教程(二) -- 写入整体层结构与CSS

css|教程|入门教程 二.写入整体层结构与CSS 接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=

Div+CSS布局入门教程(一) -- 页面布局与规划

css|规划|教程|入门教程|页面 一.页面布局与规划 好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的.那么接下来的这篇文章就带领大家入门吧... 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第

基于XHTML标准DIV+CSS布局对SEO的影响

css|seo|xhtml|标准 前两天发完<SEO参考:DIV+CSS三行两列经典布局>一文,不少朋友在MSN上问我,使用XHTML标准的DIV+CSS布局对于SEO到底有什么作用.这两天简单总结了一下,写出来供参考. XHTML技术问题请参考相关网站研究,下面说说在SEO方面的影响. 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二