CSS布局 0x6 inline-block

最新推荐文章于 2025-06-05 06:40:33 发布

原创最新推荐文章于 2025-06-05 06:40:33 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#inline-block #CSS #CSS布局 # inline-block元素间隙

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

CSS

29 篇文章

订阅专栏

本文对比了使用float和inline-block进行网页布局的方法，详细解释了两种方式的实现原理及应用示例，同时展示了如何利用inline-block创建无间隙的网格布局。

可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。

使用浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float VS inline-block</title>
        <style>
            .box{
                float: left;
                width: 200px;
                height: 100px;
                margin: 1em;
                border: solid yellow 1px;
            }
            .after-box {
                clear: left;
                border: solid greenyellow 1px;
            }
        </style>
    </head> 
    <body>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="box">我在浮动！</div>
        <div class="after-box">我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。</div>
    </body>
</html>

使用 inline-block

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float VS inline-block</title>
        <style>
            .box2 {
                display: inline-block;
                width: 200px;
                height: 100px;
                margin: 1em;
                border: solid yellow 1px;
            }
            div {
                border: solid greenyellow 1px;
            }
        </style>
    </head> 
    <body>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div class="box2">我是一个行内块！</div>
        <div>这次我可没有用 clear 。太棒了！</div>
    </body>
</html>

inline-block布局实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>inline-block layout</title>
        <style>
            nav {
                display: inline-block;
                vertical-align: top;
                width: 25%;
                border: solid red 1px;
            }
            .column {
                display: inline-block;
                vertical-align: top;
                width: 70%;/*由于当前未处理元素间隙，故先设置为70%*/
                border: solid red 1px;
            }
            section {
                border: solid yellow 1px;
            }
            div{
                
                border: solid green 1px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <nav>
                <ul>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                    <li><a href="#">aaa</a></li>
                </ul>
            </nav>
            <div class="column">
                <section>Tada!</section>
                <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
                </section>
            </div>
        </div>
    </body>
</html>