两列布局、三列布局

最新推荐文章于 2021-08-03 20:41:47 发布

风动之石

最新推荐文章于 2021-08-03 20:41:47 发布

阅读量570

点赞数

分类专栏： CSS 专题

本文链接：https://blog.csdn.net/cxl444905143/article/details/46980909

版权

本文介绍了CSS布局中两列和三列的实现方法，包括单列定宽自适应和三列布局的多种策略，如使用margin、float、绝对定位以及负margin等技巧。

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

单列定宽单列自适应

方法一：margin和绝对定位

<div id="container">
    <div class="mainBox">
        <p>主要内容区域</p>
        <p>已经不再只是一行文字了</p>
        <p>要放很多很多东西到这个区域中来</p>
        ....
        <p>不断的重复啊重复着……</p>
    </div>
    <div class="sideBox">侧边栏
        <p>不断的重复啊重复着……</p>
        ....
        <p>不断的重复啊重复着……</p>
    </div>
</div>

#container {
    position:relative; /* 添加相对定位属性为其子元素的绝对定位属性有参照物 */
    margin:10px 0;
} /* 设置页面内容区域设置上下外补丁为10px */
.mainBox {
    width:auto; /* 将mainBox的宽度修改为auto默认值 */
    margin-right:200px; /* 利用外补丁属性为sideBox留有200px的空白 */
    color:#FF0000;
    background-color:#333333;
} /* 设置主要内容区域的宽度为au

最低0.47元/天解锁文章