div流式布局_html/css_WEB-ITnose
程序员文章站
2022-04-05 09:45:59
...
css 布局
求大神指导,为什么第二个div没办法显示出来,还有是不是float跟clear不能再同一行里是用???
我把这个代码改成这样 按你的说法应该是会同时显示第一个div跟第二个div 可是还是没办法显示第二个div 能解释下吗 大神
//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}
div的概念 第一个div第二个div第三个div第四个div
求大神指导,为什么第二个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
推荐阅读
-
html5 div布局与table布局详解
-
html5 div布局与table布局详解
-
第七步:html布局div(header/nav/section/footer)
-
HTML+CSS+JS 瀑布流式布局(实现懒加载)
-
Codeforces Round #156 (Div. 2)-A. Greg's Workout_html/css_WEB-ITnose
-
Codeforces Round #107 (Div. 2)-A. Soft Drinking_html/css_WEB-ITnose
-
Codeforces Round #191 (Div. 2)-A. Flipping Game_html/css_WEB-ITnose
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
?4种实现多列布局css_html/css_WEB-ITnose
-
DIV+CSS在不同浏览器中的表现_html/css_WEB-ITnose