html - css三栏式布局 极端情况

问题描述

问 题

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

<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的话 当窗口缩为很小的时候 最右边是会掉落下去的应该

解决方案

你的.center并没有浮动啊。

这篇关于html - css三栏式布局 极端情况的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！