CSS之常用自适应+定宽布局

左边自适应,右边固定宽度

思路:

1.右边元素float:right

2.主元素不定宽,设置margin-right为右元素宽度

3.HTML树:右元素+主元素

代码:

HTML:

<div class="right">right</div>
<div class="main">main</div>

CSS:

    * {
            margin: 0;
            padding: 0;
        }

        .right {
            float: right;
            width: 200px;
            height: 800px;
            background-color: green;
        }

        .main {
            margin-right: 200px;
            height: 800px;
            background-color: blue;
        }

demo:  左边自适应右边固定宽度

中间自适应 两边固定宽

1.圣杯布局

思路:

1.父容器左右内边距设置为左右元素宽