xbns.net
当前位置:首页 >> html5Div田字布局 >>

html5Div田字布局

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.divL{float: left;background-color: yellow;width: 120px;height: 120px;}.divLT{margin: 50px;}.divLB{margin: 0px 50px 50px;}.divR{float: right;background-color: yellow;width:

这个比较简单,可以拆分一下,先上下布局,在子区域里左右布局.<div> <div style="float:left;width:49%">上左</div> <div style="float:rightwidth:49%">上右</div></div><div> <div style="float:left;width:49%">下左</div> <div style="float:rightwidth:49%">下右</div></div>具体css自行设置----------------------------当然,先左右布局,在子区域里上下布局也行

将4个方块用div包裹,再设置float属性为left,最后将4个方块放到一个大的div中

<div id="wp"> <div id="div1"> <div>1</div> <div>2</div> </div> <div id="div2"> <div>3</div> <div>4</div> </div> </div> #wp{ width:200px; } #div1 , #div2{ width:200px; overflow:hide; } #div1 div, #div2 div{ width:100px; height:100px; float:left; }

首先,腹肌lside的宽度不够换成640,然后a的height改成300,然后给abcd都加float:left;不用clear:both;宽度满了会自动换行

<!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

html <div id="a"></div><div id="b"></div><div id="c"></div><div id="d"></div> css div{width: 200px;height: 200px;float: left;}#a{background: blue;}#b{background: red;}#c{background: green;clear: both;}#d{background: orange;} 相同的属性,可以写在一起!

如下代码,如有疑问可以追问<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf8" /><title>demo</title><style type="text/css"> body { margin: 0; } #div1 { height: 250px; background: #7FFF00;

哎,你对CSS的标签属性都不了解,解释了你也不明白啊给你个思路吧<div style="大框架设定宽度如:width:400px;"> <li style="每个产品内容的框架,宽度设为200PX,这样就会平均分下去不要再去定位浮动了"> <img>图片</img> <p><

可以用table

网站首页 | 网站地图
All rights reserved Powered by www.xbns.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com