CSS布局:居左之后居右是100%宽度显示问题

2016-02-19 23:32 23 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享CSS布局:居左之后居右是100%宽度显示问题的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  下面这段代码是个常见的问题,解决的办法也有多个,最近发现一种放,放上来和大家讨论一下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  问题代码:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title new document /title
style type="text/css" media="screen"
!--
#content { overflow: hidden; zoom: 1; }
#left { float: left; width: 200px; }
#right { background: #FFC8D0; }
--
/style
/head
body
div id="content"
    div id="left"
    left - webjx.com
    /div
    div id="right"
    right - webjx.com
    /div
/div
/body
/html

解决后CSS:

#content { overflow: hidden; zoom: 1; }
#left { float: left; width: 200px;   }
#right { background: #FFC8D0;overflow: hidden; zoom: 1;  }

查看运行效果:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

来源:http://www.tulaoshi.com/n/20160219/1630123.html

延伸阅读
标签: Web开发
公司的项目中需要显示由用户提供URI链接的图片,可是预先无法获知图片的尺寸大小,如果图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩略图,涉及的后台工作较为复杂,用CSS进行控制是一个可以接受的捷径。 如果用width属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width属性支持。假定希望...
标签: Web开发
如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LE...
标签: 生活常识
绚丽缤纷壁纸 营造宜居氛围 夏季家居指南:绝美的客厅装修 堪称史上最经典 客厅代表的是一个家的门面,一进入家门,客厅更是全家人或来宾聚会时众人的视觉焦点,相对的,客厅的空间舒适与否或动线是否流畅,将直接关系到全家人的生活品质与整个家的生活风貌。只要掌握住客厅规划的小小原则,将可以为全家人建构一个舒适、温暖的家。 ...
标签: 辐射4 游戏动漫
《辐射4》居礼任务图文详解 《辐射4》游戏中怎么邀请居礼成为伙伴?有些玩家不是很清楚,下面为大家分享下《辐射4》居礼任务图文流程详解,邀请居礼成为伙伴的方法,一起来看下吧。 居礼是愿意热心帮助人的冒险者才能够邀请到的伙伴。 地点在,81号避难所,(钻石城的左上方一点点) 进入的门票 必须要给这地区的居民,3~4颗动力核心...

经验教程

267

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部