ydzf.net
当前位置:首页 >> html三个Div横向排列 >>

html三个Div横向排列

给div1设置高度和宽度,如height:100px;width:50px;那么为div2设置相同高宽度的同时,添加margin:-100px auto 0 50px;此时div2和div1等高宽且并排,div3也是类似设置方法总结:利用margin-top为负值的方法可以达到并排效果div+css中最好不要使用float属性,这对今后修改会产生很多不必要的麻烦

1、新建html文档,在body标签中添加一个div标签,然后在这个div标签中添加一些div标签:2、为外div标签和内div标签添加一些样式,由于div元素是块级元素,所以内div会在外div中垂直排列:3、为内div添加“display: inline-block;”样式,这时内div就会变成行级块元素,这样内div就会在div中横向排列了:

xhtml: 这里是顶行 这里是第一列 这里是第二列 这里是第三列 这里是底部一行 css: #header{width:100%; height:auto;} #wrap{ width:100%; height:auto;} #column{ float:left; width:60%;} #column1{ float:left; width:30%;} #column2{ float:right; width:30%;} #column3{ float:right; width:40%;} .clear{ clear:both;} #footer{width:100%; height:auto;}

css: .main{width:800px;} .lefts{float:left;width:250px;margin-right:10px;} html: <div class="main"> <div class="lefts">1列</div> <div class="lefts">2列</div> <div class="lefts">3列</div> <div class="lefts">2行1列</div> <div class="lefts">2行2列</div> </div>

<style>div div{ width:33%; float:left; margin:1px; background:red; height:60%; position:relative;}</style><div><div><ul><li>左边</li><li>左边</li><li>左边</li><li>左边</li></ul></div><div><p>中间中间</p></div><div>右边</div> </div>

浮动:左对齐

你用ul li吧,就可以实现你所说的效果了,这种一般都是用的ul来做的.

1、让div浮动,即:div{float:left;}或div{float:right;}2、设置display值为inline,即:div{display:inline;}

你设置的是三个div,此三个div都是靠左浮动,float:left;,而你最外围的div的宽度是:100%如果让三个div竖排的话,三个区域,总宽度100%,那么他们只要大于等于34%,即可竖排,如果是两个div那么宽度大于50%,即可竖排,因为你的屏幕总大小设定的100%;当然也不可能再大了如果屏幕的宽度也就是浏览器的宽度,低于33%;那么div区域块就会自动往下移动了;如果还有其他疑问请继续追问我;

三个div大小固定,都设置浮动

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