关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

两个div水平垂直排列示例

JS/CSS admin 浏览 评论

 两个div默认情况下就是垂直排列的,代码如下:

<div style="border:5px solid red;">
 哈哈哈
</div>

<div style="border:5px solid black;">
 呵呵呵
</div>

效果如图:

QQ截图20171220090757.jpg

但是有时候因为你设置了别的属性,div垂直排列怎么都不行,那该怎么办呢?解决方案有两种:

方式一:如果你想在div垂直排列的时候之间没有间隔,只需要在style加入如下属性:

style="clear:both;"

 整体html代码:

<div style="border:5px solid red;">
哈哈哈
</div>

<div style="border:5px solid black;clear:both;"">
呵呵呵
</div>

方式二:如果div垂直的时候想要设置间隔,则可以在中间加一个div,并加入如下style属性,height表示此div的高度,也就是之间的距离:

.clear{
    height:20px;
    clear:both;
}

整体代码如下:

<div style="border:5px solid red;">
 哈哈哈
</div>
<div class="clear"></div>
<div style="border:5px solid black;">
 呵呵呵
</div>

两个div水平排列就简单了,只需要设置这两个div的style="float: left”属性即可,代码如下:

<div style="float: left;width:100;">
 哈哈哈
</div>

<div style="float: left;width: 100;">
 呵呵呵
</div>

完毕!

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/1220/437.html