易截截图软件、单文件、免安装、纯绿色、仅160KB

如何让浮动层加margin后不换行 Div+CSS教程

此文为网上收集~
给客户做站的时候遇到的问题,div层加了margin后 总宽度超过父级层宽度 就自动换行了 如何让浮动层加margin后不换行呢?
下面看浮动层加margin后换行的例子:
比如说有个DIV宽度为380px,它里面有一个菜单列表,每个宽度为60px,margin-right为20px。如果就按照下面的HTML结构来做的话,那么这个菜单列表能在这个DIV里一行显示完整吗?
   1. <div>
   2.     <div>mb5u1</div>
   3.     <div>mb5u2</div>
   4.     <div>mb5u3</div>
   5.     <div>mb5u4</div>
   6.     <div>mb5u5</div>
   7. </div>
5个菜单,每个宽度为60px,右边外补白为20px,因此每个菜单整体宽度是80px,5个菜单总长度为400px,而父级层宽度只有380px,根据浮动的原理,那么第5个菜单将毫无疑问的被挤下去即换行了。
看下我的解决方法:
代码如下:
   1. <div>
   2.     <div class="overflowDiv">
   3.        <div>mb5u1</div>
   4.        <div>mb5u2</div>
   5.        <div>mb5u3</div>
   6.        <div>mb5u4</div>
   7.        <div>mb5u5</div>
   8.     </div>
   9. </div>
 父级层宽度380px,遮罩层overflowDiv宽度设置为菜单需要的400px,overflow为hidden。因此,很自然的,遮罩层多出的20像素部分则不会显示出来。
而菜单就在这400px的宽度里为所欲为了。
如果各位朋友有更好的办法,希望能在评论中留言告诉我哦。


相关文档:

CSS命名规范

CSS命名规范
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guil ......

CSS设计彻底研究

这本书不错,详细介绍了CSS的相关知识,对初学者和想进一步学习的人都有帮助。
 相关笔记:
     行内样式>ID样式>类样式>标记样式
     font-weight:bold;
     font-size:30px;
     text-decoration:underline;
& ......

在网页中加入CSS的方法

1.直接加在对象上
  <html>
   <head>
    <title>title</title>
   </head>
   <body>
    <span style="color:red">red</span>
   </body>
  </html>
2.加到页面头部
  <html>
   <head>
    < ......

css中 id和class区别与使用

id和class到底要用哪一个?
  首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
  id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有效的。 ......

css之自动换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
css
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号