html - 为什么 inline-block 和 max-width 不能一起工作？

Question

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

站点:http://66.172.10.179/resolver/

我试图将 box1 的最大宽度设置为 300px。我想做一个这样的盒子:

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

如果我保留行内 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 的可能值属性(property)。

将显示设置为 inline-block暗示没有特定的宽度，但是 block (这是 <div> 元素的默认值)表示 100% 宽度。

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

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