html - 我如何防止第二个 child 包裹

Question

#parent{
    max-width:1100px;
    margin: auto;
    border: 1px solid red;
    padding: 40px;
}
#child0{
    display:inline-block;
    height: 200px;
    width: 200px;
    border: 1px solid blue;
}
#child1{
    display:inline-block;
    height: 200px;
    max-width: 200px;
    width:100%;
    border: 1px solid green;
    float:right;
}

<div id="parent">
    <div id="child0">
        Hello0
    </div>
    <div id="child1">
        Hello1
    </div>
</div>

这是一个简单的html文档，我用max-width测试过，但看不懂。当我减小屏幕宽度时，第二个 child1 中断 child0 并结束，然后 max-width 开始工作，我想在 child1 时这样做breaks child0 开始其最大宽度，而不是在换行之后。

Answer 1

问题是您的第二个 block 宽度获得父 block 的 100%。它应该得到 (100% - 200px)。此外，您应该使用 box-sizing: border-box;

降低填充和边框尺寸

#parent{
    max-width:1100px;
    box-sizing: border-box;
    margin: auto;
    border: 1px solid red;
    padding: 40px;
}
#child0{
    display:inline-block;
    box-sizing: border-box;
    height: 200px;
    width: 200px;
    border: 1px solid blue;
}
#child1{
    display:inline-block;
    height: 200px;
    box-sizing: border-box;
    max-width: 200px;
    width: calc(100% - 200px);
    border: 1px solid green;
    float:right;
}

<div id="parent">
    <div id="child0">
        Hello0
    </div>
    <div id="child1">
        Hello1
    </div>
</div>