div并排排列的两种方法浅谈。

最新推荐文章于 2024-07-09 23:24:46 发布

转载最新推荐文章于 2024-07-09 23:24:46 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hf1230/p/7118532.html

本文介绍了如何使用CSS中的float和display属性实现div元素的横向排列，并对比了两种方式的特点及适用场景。

div是块级元素，所以在排列的时候会纵向排列，如果想解决这个问题的话，可以给div加上float：left/right样式，这样div就会横向排列（无缝排列）

.div-one{
background-color:red;
/*无缝排列*/
 float: left;
}

如果说想让div横向排列并且div之间有缝隙，那么可以将div变成行内块（display：inline-block）即可。

.div-one{
background-color:red;
/*有缝排列*/
 display: inline-block;
}

缺点：拖动浏览器宽度的时候，因为宽度变小，可能会有div被挤到下面去，所以建议使用float，给div设置百分比宽度（这里就是百分比布局了.........）

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 *{
margin: 0;
padding: 0;}
div{
width:200px;
height:200px;
 }
 .div-one{
background-color:red;
/*无缝排列*/
 float: left;
/*有缝排列*/
 /*display: inline-block;*/
 }
 .div-two{
background-color:blue;
float: left;
/*display: inline-block;*/

 }
 .div-three{
background-color:yellow;
float: left;
/*display: inline-block;*/
 }
</style>
</head>
<body>
<div class="div-one"></div>
<div class="div-two"></div>
<div class="div-three"></div>
</body>
</html>

-----------------------------------------------------------------------------
转载请标明出处