灵活的两列布局-css-ArcherWong博客

灵活的两列布局

作者：ArcherWong
分类：css
时间：2019-01-03 21:33:01
阅读：289

# 方案1

```
<style type="text/css">
     #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;}
     #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;}
     #main-right {min-height:400px;background:#7CC0FF;}
     .float {float:left;}
     .clear{clear:both: height : 0; line-height:0; font-size:0;}
</style>
<div id="main">
     <div id="main-left"  class="float">
            这个是左边部分，宽度确定
     </div>
     <div id="main-right">
            这个是右边部分，宽度自动扩展
     </div>
     <div class="clear"></div>
</div>
```

父元素padding-left:300px，每行留给子元素的宽度=父元素宽度-300px;
这时让左侧元素宽度为300px，并且设置左边距为-300px，则左侧块与父元素左边距重合了。
右侧元素宽度百分之百自适应父元素宽度。

# 方案2

圣杯和双飞翼布局
https://github.com/rccoder/blog/issues/6

```
<div class="head">head</div>

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

<div class="foot">foot</div>
```

圣杯主要思想

```
.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
    margin-left: -100%;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
    margin-left: -60px;
}
.main {
    background-color: crimson;
    width: 100%;
}
.content {
    padding: 0 60px 0 40px;
}
```

关键点1：

main, left, right 我们都可以看做是在一个浮动流中，依次的顺序也是 main left right。目前是因为 main 占了100% 从而导致 left 与 right 不能和 main 浮在同一行了，这个时候我们可以利用负边距来让 left 向前移动 （即 **margin-left 为正的时候就是和左边的盒子的外边距，那么为负的时候就是像前移动了**）。

关键点2：

给content一个内边距，这样就不会出现left和main，以及right和main的重叠了

双飞翼布局主要思想

```
<div class="head">head</div>

<div class="content cleanfix">
    <div class="main">
        <div class="wrap">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<div class="foot">foot</div>
```

双飞翼布局和圣杯布局很像，区别是在 main 里面再添加一个 div, 然后对这个 div 进行 margin-left 和 margin-right，而不是给content一个padding。

```
.wrap {
    background-color: darkmagenta;
    margin-left: 40px;
    margin-right: 60px;
}
```

标签：

上一篇：css一些知识总结

下一篇：elasticsearch-mathc和term的区分

灵活的两列布局

文章分类

阅读排行

友情链接