css三栏式布局 极端情况

Question

直接上代码 自己写的代码的类名是根据内容起的 看着比较烦 我给简化一下 给出关键部分的代码 看着清晰

<div class="Container">
    <div class="left">
        <img src="">
    </div>

    <div class="right">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
    </div>

    <article class="center">
        <p>It is your team's Introduction.</p>
    </article>
</div>

.Container {
    background-color: #EEEEEE;
    border: 1px solid #999999;
    padding: 20px;
    margin: 20px;
    overflow: auto;
}

.left {
    background-color: #FFFFFF;
    width: 160px;
    padding: 20px;
    float: left;
}

.right {
    background-color: #FFFFFF;
    width: 80px;
    padding: 20px;
    text-align: center;
    float: right;
}

.center {
    background-color: #FFFFFF;
    margin: 0 140px 0 220px;
    padding: 20px;
}

现在的问题就是当我将窗口缩成极端小的时候 最右侧的right类并没有自动落在他俩的下面 请问应该怎么解决呐 如果单纯的对right和left先float 然后再对center进行float的话 当窗口缩为很小的时候 最右边是会掉落下去的应该

Answer 1

你的.center并没有浮动啊。

Answer 2

这个问题吧，你该了解下float，float是将元素抽离文档流的，但是不float的center占据文档流，会根据浏览器宽度，变化，但是不会脱离文档流原本的位置，但是left和right有float属性，当浏览器宽度不够时，会自动被挤占。

但是挤占也很有讲究，由于你的布局方式，center永远会被挤到最下方

如果你想要right被挤到最下方，那么需要这样

<div class="Container">
    <div class="left">
        <img src="">
    </div>

    <article class="center">
        <p>It is your team's Introduction.</p>
    </article>

    <div class="right">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
    </div>
</div>

Answer 3

建议搜索一下双飞翼布局

Answer 4

昨天忘更新了 我这种做法的话 有个折衷的方式可以让页面效果在极端情况下也不会走形 在.Container加个min-width 就达到我的期望啦！另外 根据楼上的答案 我也看了一下双飞燕布局跟圣杯布局 很强势 如果有小伙伴也遇到类似的问题 或者在做IFE的tasks 遇到类似情况 可以有个参考和解决方法啦！