> 웹 프론트엔드 > HTML 튜토리얼 > 简单的div布局_html/css_WEB-ITnose

简单的div布局_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 09:39:26
원래의
1240명이 탐색했습니다.

要求: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으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿