首页 > web前端 > html教程 > 简单的div布局_html/css_WEB-ITnose

简单的div布局_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 09:39:26
原创
1238 人浏览过

要求:div1和div3靠左悬浮,div2和div4靠右悬浮,这四个div都不设置高度,里面的内容增加,高度自动增加
div5是最外边,宽度1000px,居中,高度不设置,随着里面的四个div的增大而增大
我写了好几遍,总是在最外层div5出错,如果不设置高度,div5总是不能包括里面的四个div,里面的全都跑出来了
相信这么简单,一定有很多人会,帮忙指点一下吧

回复讨论(解决方案)

作业、LZ你又不好好学了、

div1234 dispaly:inline-block

作业、LZ你又不好好学了、 作业?不是的,没事做几个网页出来,以前都是用table布局,似乎加载速度比较慢,用div布局又不熟练

div1234 dispaly:inline-block 初步问题是解决了,这时候如果在div1中写入东西,高度就会增加,但div3不会紧跟在div1的下面,div3会跑到右侧div4的下面。如果在div2中写入东西的话,虽然div4会继续留在div2的下面,但是div1和div3的位置又会发生变化。我说的太乱了,不知你理解我的意思不理解,有没有较为完美的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style type="text/css">body{margin:0px;padding:0px;font:12px/24px Helvetica, Microsoft YaHei, Tahoma, Arial, sans-serif;}div{margin:0px;padding:0px;}.div5{width:610px;padding:20px;margin:100px auto;border:1px #333 solid;}.div5 .left{float:left;width:300px;}.div5 .left .div1{border:1px #333 solid;}.div5 .left .div3{margin-top:10px;border:1px #333 solid;}.div5 .right{float:right;width:300px;}.div5 .right .div2{border:1px #333 solid;}.div5 .right .div4{margin-top:10px;border:1px #333 solid;}.clear{clear:both;}</style><body><div class="div5">	<div class="left">    	<div class="div1">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</div>    	<div class="div3">内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</div>    </div>	<div class="right">    	<div class="div2">内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</div>    	<div class="div4">内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4</div>    </div>	<div class="clear"></div></div></body></html>
登录后复制

CSS code?123456789101112131415161718192021222324252627282930313233nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…… 完全符合要求,多谢了

CSS code?123456789101112131415161718192021222324252627282930313233nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…… 刚才没看清,其实也不太符合要求,因为你多用了

,还是上下排版,这样也好,换种思路也能解决问题,同样要谢谢你

很实用呀,以后可以多用div来布局,方便又省时呀!!
像calmthink好好学习!!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板