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>

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

浮动:左对齐

给每个 加一个宽度,然后在设定一个浮动

只要你不在超出最外层宽度的基础上,设置float:left;或者float;rigght;都可以实现多个DIV横放

<div id="zhong"> <div id="left">左边的div</div> <div id="center">中间的div</div> <div id="right">右边的div</div><div style="clear:both;"></div>(在这里 加一个清除浮动)</div>CSS:#zhong {height: auto;width: 1000px;/*margin-right:

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