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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/guess_who_you_are/article/details/76239093

各种对齐以及布局方式

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

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>

实现结果预览

这里写图片描述

总结:

使用inline-block布局,需要消除因为代码的换行符造成的约-4px的空隙,块之间的空隙可以使用margin来实现。这几个布局的思想都是使用一个wrap来包裹全部,并使用margin来空出空间,对于边栏使用margin负值来填充wrap的margin造成的空白区域。

展开阅读全文

没有更多推荐了,返回首页