为什么内联块和最大宽度不能一起工作？

Question

刚开始学习CSS / HTML。我正在创建一个用于教育目的的网站。 我也很难解释事情，所以我希望你能理解。

网站：http://66.172.10.179/resolver/

我正在尝试将box1的最大宽度设置为300px。 我想制作一个这样的方框：

但出于某种原因，如果我删除display：inline-block;它看起来像这样：

如果我保留内联块;并将最大宽度更改为它的工作宽度，但问题是 该框不会根据屏幕网站调整大小。

CSS：

.stats {
    padding: 15px;
}

.box1 {
    background-color: blue;
    width: 300px;
    display: inline-block;
    padding: 10px;
}

.icon {
    font-size: 50px;
    color: white;
    display: inline;
}

.text {
    float: right;
    display: inline;
}

HTML：

    <section class="stats">
        <div class="box1">
            <div class="icon">
                <i class="fa fa-hdd-o"></i>
            </div>
            <div class="text">
                <p>123</p>
                <p>Servers</p>
            </div>
        </div>

Answer 1

max-width属性并不意味着任何特定的宽度。相反，它限制了width属性的可能值。

将显示设置为inline-block表示没有特定宽度，但block（这是<div>元素的默认值）意味着100％宽度。

要回答您的问题，max-width和inline-block会一起工作。

如果您的目标是阻止元素超出浏览器宽度，则需要max-width: 100%。