如何让浮动层加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命名规范
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guil ......
这本书不错,详细介绍了CSS的相关知识,对初学者和想进一步学习的人都有帮助。
相关笔记:
行内样式>ID样式>类样式>标记样式
font-weight:bold;
font-size:30px;
text-decoration:underline;
& ......
1.直接加在对象上
<html>
<head>
<title>title</title>
</head>
<body>
<span style="color:red">red</span>
</body>
</html>
2.加到页面头部
<html>
<head>
< ......
id和class到底要用哪一个?
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有效的。 ......
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
css
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word ......