首页 > 代码库 > 多个盒子一行排列的方法大全 响应式网页布局

多个盒子一行排列的方法大全 响应式网页布局

2024-07-21 18:49:38   222人阅读

如果想把多个块级元素放到同一行上，同学们首先想到的是浮动，但是就仅仅独此一种吗，答案不是的。这里小强老师总结了5种布局方式，希望对大家有所帮助。

第一种方法： 浮动法

这种方法是最简单的，也是我们初学css必须掌握的技能，就是把li浮动起来就好了。


代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{width:80%;height: 200px; list-style: none;}
        li{float: left;width: 200px;height: 200px; background:pink; margin-left: 10px;}

    </style>
</head>
<body>
    <ul>
        <li>左侧</li>
        <li>中间</li>
        <li>右侧</li>
    </ul>
</body>
</html>


效果如下：


小强零零壹

第二种方法： 定位法


这种方法也可以，但是比较少用。

第三种方法： 转换为行内块法

我们知道，我们CSS显示模式，有行内显示模式（inline），有块级显示模式（block），还有行内块显示模式（inline-block）

我们知道，在网页布局中，很多地方，我们能用标准流做的，就不用浮动或者定位来做。因为 inline-block 属于标准流，因此比起浮动和定位，更为稳定。

例如淘宝网：

小强零零壹

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{width:80%;height: 200px; list-style: none; font-size: 0;
        /* 给父盒子加font-size：0可以去除默认空白间距 */}
        li{width: 200px;height: 200px; background:pink; margin-left: 10px;
         display: inline-block;/* 转换为行内块 */ font-size: 12px;/* 把字体大小改回来 */}

    </style>
</head>
<body>
    <ul>
        <li>左侧</li>
        <li>中间</li>
        <li>右侧</li>
    </ul>
</body>
</html>



效果如下：


第四种方法： table-cell


我们知道 display：table 是转化为表格元素的方法  display:table-cell 转换为单元格元素
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{width:80%;height: 200px; list-style: none;border-spacing: 10px 0;/* 因为使用table-cell之后，margin是不能用的，因此这里使用border-spacing */  border-collapse:separate;}
        li{width: 200px;height: 200px; background:pink;
          display: table-cell;}
        

    </style>
</head>
<body>
    <ul>
        <li>左侧</li>
        <li>中间</li>
        <li>右侧</li>
    </ul>
</body>
</html>


效果如图所示：

小强零零壹

这种方法不适合ie6、7，但是考虑到ie6.7已经很少很少了，我们可以放心的用它了。

 

第五种方法： CSS3 布局 display:flex

这是根据CSS3盒子模型，新增属性，有了它书写很方便，而且每个li的宽度可以自适应父盒子，以后用它做响应式网页方便了很多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{width:80%;height: 200px; list-style: none;
            display: flex;  /* 利用flex 来进行划分布局 */
            flex-flow:row;  /* 设置是横向分布还是纵向分布 如果是flex-flow:column;是三个竖直排列 */
        }
        li{height: 200px; background:pink;
            flex:1; /* 平局分成三份，每个li占一分 */
             margin-left: 10px;
          }
        

    </style>
</head>
<body>
    <ul>
        <li>左侧</li>
        <li>中间</li>
        <li>右侧</li>
    </ul>
</body>
</html>


效果如图：

小强零零壹


注意： 因为css3肯定有浏览器兼容性问题，大家不要忘了加前缀。在这里，小强老师想让大家代码看的更清除，因此没有加前缀。
例如：display:-webkit-flex;  -webikt-flex:1;

怎么样，原来盒子排列也有这么多方法，特别是后面三种方法，会运用越来越多。因为，以后的网站朝着html5和css3大步前进。

小强零零壹和大家一起分享。

多个盒子一行排列的方法大全 响应式网页布局


联系
我们