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

【问题标题】：Why does inline-block and max-width not work together?为什么 inline-block 和 max-width 不能一起工作？
【发布时间】：2014-09-03 07:26:31
【问题描述】：

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

网站：http://66.172.10.179/resolver/

我正在尝试使 box1 的最大宽度为 300 像素。我想做一个这样的盒子：

但由于某种原因，如果我删除 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>

【问题讨论】：

为什么不用 Twitter Bootstrap 网格系统？您的页面将响应。顶部导航等固定宽度在 2014 年是个坏主意。
你在找什么jsfiddle.net/ZeLx9
你说得对。你不善于解释事情。所以，我很困惑，因为你的标题说“为什么 inline-block 和 max-width 不能一起工作？”你的问题是为什么当你删除内联块时它不起作用？
我不确定你想做什么，但你可以同时使用max-width和width。
如果我添加最大宽度和宽度，我认为它不会调整大小。 @Erik 这就是我要找的东西，但我需要它与 max-width 一起工作，所以这是调整大小的

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

如果页面很小，我怎样才能使框可以自行调整大小？我在事物上使用最大宽度，因此最大宽度是它可以的最大尺寸，但允许它变小。
@user3728587，“如果页面很小”到底是什么意思？您是在谈论屏幕或浏览器大小还是内容量？设置max-width: 100% 意味着不增长任何大于父元素的宽度。
是的，关于浏览器的大小，所以它被压扁了。感谢你的帖子，我实际上知道了如何做到这一点。我在 box1 中添加了 max-width，并在 .icon 和 .text 中添加了 inline-block。效果很好，我不知道 inline-block 已经设置了一个宽度。我在解释事情方面很糟糕，但感谢您的帮助并查看该网站以了解我所说的调整大小的意思！