div布局系列 - 两端对齐的方法

最新推荐文章于 2025-03-27 17:52:05 发布

原创最新推荐文章于 2025-03-27 17:52:05 发布 · 6.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html布局 #两端对齐

Html+css基础专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用CSS的box-sizing属性来实现更精确的布局控制的方法。通过设置box-sizing为border-box，可以使得元素的总宽度等于设定的width值，而不会因为边框和内边距的增加而导致实际宽度超出预期。此技巧特别适用于需要固定宽度布局的设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一：box-sizing:border-box
html代码部分

<div class="content clear-fix">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

css样式部分

    <style type="text/css">
        .content{
            width: 1080px;
            min-height: 400px;
            border: 1px solid #ccc;
            margin: 10px auto;
            padding: 6px;
        }
        .clear-fix:after{
            content: '';
            display: block;
            clear: both;
        }
        .content>div{
            width: 200px;
            min-height: 230px;
            border: 1px solid #963;
            float: left;
            margin-right: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        .content>div:nth-child(5n){
            margin-right: 0px;
        }
    </style>