Question

我是HTML / CSS的新手，我正在浮动玩一下。我想要做的是当左边的绿色框小于150像素时固定它（不是屏幕，我的意思是盒子本身。当你玩的时候，你看到每个宽度都相对于％移动，我想要绿色盒子就像它现在一样移动，但是当盒子变得小于150px时，它应该停止变宽。）我试图通过添加min-width：150px来实现这一点，但这只会在布局变小时杀死布局，以便DIV的三个框不再在一行中。

（请忽略那些许多ID，仅用于练习）

#a {
    width: 100%;
    height: 60px;
    background-color: #ea0000;
    }

    #b {
    width: 15%;
    height: 200px;
    background-color: #0aa699;
    float:left;
    }

    #c1 {
    width: calc(85% / 2);
    height: 200px;
    background-color: #00ACEE;
    float:right;
    }

    #c2 {
    width: calc(85% / 2);
    height: 200px;
    background-color: #ac2aa1;
    float:right;
    }

    #d {
    width: 100%;
    height: 60px;
    background-color: #ff8300;
    }

    .clear:before, .clear:after {    
    content: "";
    display: table;
    clear: both;
    }

        <header>
            <div id="a">
            </div>
        </header>


        <div class="clear">

            <section>
                <div id="b"></div>
            </section>

            <aside>
                <div id="c1"></div>
                <div id="c2"></div>
            </aside>

        </div>


        <footer>
            <div id="d"></div>
        </footer>

Answer 1

我已经解决了这个问题：

https://jsfiddle.net/vkfd2t6b/1/

我所做的是将最小宽度设置为150px到#b。然后aside包装器就是我设置width: calc(100% - 150px);宽度的地方。然后，我将aside向右浮动。然后aside中的两个元素设置为50％。

#b { 
   min-width: 150px; 
}        
aside {
   width: calc(100% - 150px);
   float: right;
}
#c1, #c2 {
   width: 50%;
}

此外，我添加了媒体查询，以便当div大于150像素时，它会将aside宽度计算切换为15％而非150px

@media screen and (min-width: 1000px){
   aside {
      width: calc(100% - 15%);
   }
}

如何修理那个盒子？

1 个答案: