阅读 102

css布局

左右布局

使用浮动即可实现左右布局

左侧定宽右侧自适应

html代码

<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
复制代码

css代码

.left{
    background: red;
    height: 500px;
    width: 300px;
    float: left;
}
.right{
    background: green;
    height: 500px;
    margin-left: 300px;
}
复制代码

左中右布局

使用浮动即可实现左中右布局

左侧定宽,右侧定宽,中间自适应

html代码

<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">middle</div>
</body>
复制代码

css代码

.left{
    background: red;
    height: 500px;
    width: 300px;
    float: left;
}
.right{
    background: green;
    height: 500px;
    float: right;
    width: 300px;
}
.middle{
    background: yellow;
    margin: 0 300px;
    height: 500px;
}
复制代码