Rumah >hujung hadapan web >html tutorial >div流式布局_html/css_WEB-ITnose

div流式布局_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-21 09:48:411769semak imbas

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn