使用inline-block进行二栏以及三栏布局以及各种布局方式链接

最新推荐文章于 2022-04-19 10:10:50 发布

guess_who_you_are

最新推荐文章于 2022-04-19 10:10:50 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： css 布局

本文链接：https://blog.csdn.net/guess_who_you_are/article/details/76239093

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何利用CSS的inline-block属性进行二栏和三栏布局，包括布局方式的总结、代码展示和效果预览。在实现过程中，提到了消除inline-block元素间的空隙技巧以及通过margin调整布局的方法。

摘要由CSDN通过智能技术生成

各种对齐以及布局方式

菜鸟张小花之各种布局方式实现

CSS自适应布局

这可能是史上最全的CSS自适应布局总结教程

使用inline-block进行二栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block实现两列布局</title>
    <style>

        #main {
            margin-right: 200px;
            font-size: 0;
            letter-spacing: -4px; /*消除inline-block元素之间因为写代码换行符产生的空隙*/
        }

        #main * {
            font-size: 1rem;
            letter-spacing: normal; /*恢复字体大小等*/
        }

        #left {
            display: inline-block;
            height: 200px;
            width: 100%;
            background: red;
        }

        #right {
            display: inline-block;
            height: 300px;
            width: 200px;
            margin-right: -200px;
            background: black;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="left"></div>
    <div id="right"></div>
</div>
</body>
</html>

代码结果预览：

这里写图片描述

inline-block实现三栏布局

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用inline-block实现三栏布局</title>
    <style>
        html,body{
            background:#eee;
        }
        #wrap {
            height:100%;
            font-size: 0;
            letter-spacing: -4px;
            margin-left: 240px;
            margin-right: 190px;
            min-width: 300px;
        }

        #wrap * {
            font-size: 1rem;
            letter-spacing: normal;
        }

        #right,#left,#main{
            margin-top:20px;
            display: inline-block;
            vertical-align: top;
            background: white;

        }

        #left{
            /*height:300px;*/
            margin-left:-220px;
            margin-right: 20px;
            width: 200px;
        }
        #main{
            width:100%;
            /*height:400px;*/

        }
        #right{
            /*height:200px;*/
            margin-right: -170px;
            margin-left:20px;
            width: 150px;
        }
        img{
            margin-top:20px ;
            width: 80px;
            height: auto;
        }
        #left h2{
            display: inline-block;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="left">
        <img src="image/boy.png" >
        <h2>团队名称</h2>
    </div>
    <div id="main">
        <div>
            <h2>团队介绍</h2>
        </div>

    </div>
    <div id="right">
        <div>
            <ul>
                <li style="list-style-type: none;">
                    <img src="image/boy.png" >
                </li>
                <li style="list-style-type: none;">
                    <img src="image/boy.png" >
                </li>

                <li style="list-style-type: none;">
                    <img src="image/boy.png">
                </li>
                <li style="list-style-type: none;">
                    <img src="image/boy.png">
                </li>

            </ul>
        </div>
    </div>
</div>
</body>
</html>