如何防止第二胎包裹

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并结束，然后最大宽度起作用了，我想在child1中断child0时开始这样做宽度，而不是自动换行。

Answer 1

问题是您的第二个块宽度正在获得父级的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>