Home > Article > Web Front-end > div流式布局_html/css_WEB-ITnose
div流式布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:48:411719browse
css 布局
//style.css#first{ width:300px; height:200px; background:red; float:left}#second{ width:300px; height:200px; background:pink; clear:right}#third{ width:300px; height:200px; background:green; clear:left}#four{ width:300px; height:200px; background:blue; float:right} <html><head> <title>div的概念</title> <link rel = "stylesheet" href = "style.css" type = "css/style.css"/></head><body> <div id="first">第一个div</div> <div id="second">第二个div</div> <div id="third">第三个div</div> <div id="four">第四个div</div></body></html>
求大神指导，为什么第二个div没办法显示出来，还有是不是float跟clear不能再同一行里是用？？？
回复讨论(解决方案)
很明显，你的第二个div左侧有浮动，而你只是清除了左侧浮动，因为第一个和第二个div的高度 宽度完全一致，那么第二个div便挤了上来，正好和第一个div重合
清除左侧浮动试试
如果两个块属性元素要在同一行里显示，个人建议 两个块都要设置浮动，不能单凭左侧浮动 后边元素挤上来的办法 来解决，因为这样如果后边元素有内容的话，在低版本IE下会有兼容问题
那第三个div跟第四个div为什么不在同一行啊
#first{ width:300px; height:200px; background:red; float:left; z-index:1;} #second{ width:300px; height:150px; background:blue; clear:right; z-index:2;} #third{ width:300px; height:200px; background:green; clear:left} #four{ width:300px; height:200px; background:blue; float:right} 我把这个代码改成这样 按你的说法应该是会同时显示第一个div跟第二个div 可是还是没办法显示第二个div 能解释下吗 大神
其实我只是想说，掌握基本的原则还是有必要的，比如标签嵌套规范，基本的兼容性问题
我们不是需要挨个去测试怎样才是兼容性的代码，而是我们知道哪些是有兼容问题的，然后才去避免不兼容写法
每次我看到很多学习CSS的人纠结 为什么用p标签、li 类似这样问题，就很蛋疼，其实用什么都是一样的，也许仅仅是语义化的问题
第三个div跟第四个div为什么不在同一行？
因为第三个很明显是块属性元素，那么块属性元素的特点是什么，不管怎样，独占一排显示
我不觉得你更改后的代码有什么特别，层级的概念要结合定位，单纯的定位层级是没有意义的
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如何让Datagrid的数据列居左显示?_html/css_WEB-ITnoseNext article：@font-face不能做自定义字体么？？_html/css_WEB-ITnose