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

刚开始学习CSS/HTML。我正在为教育目的创建一个网站。我也很难解释的东西，所以我希望你明白。为什么inline-block和max-width不能一起工作？

网站：http://66.172.10.179/resolver/

我试图让BOX1的最大宽度为300像素。我想做一个这样的盒子： enter image description here

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

enter image description here

如果我把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>

来源

2014-07-13 user3728587

为什么不使用Twitter Bootstrap网格系统？您的页面将会有响应。固定宽度的东西，如顶部导航是一个坏主意，在2014年。 –

是你在找什么http://jsfiddle.net/ZeLx9/ –

你是绝对正确的。你在解释事情上很糟糕。所以，我很困惑，因为你的标题是“为什么inline-block和max-width不能一起工作？”你的问题是关于为什么当你删除内联块时它不工作？ –

的max-width属性不会暗示任何具体的宽度。相反，它限制了width属性的可能值。

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

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

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

来源

2014-07-13 01:10:05

我如何使它，使框可以调整自己，如果页面很小？我在事物上使用最大宽度，因此最大宽度是它可以达到的最大尺寸，但允许它变小。 – user3728587

@ user3728587，你是什么意思“如果页面很小？”你是在谈论屏幕或浏览器的大小或内容的数量？设置'max-width：100％'意味着不会增长大于父元素的宽度。 –

是的，关于浏览器的大小，使它挤压。我真的想出了如何做到这一点感谢您的帖子。我将最大宽度添加到box1，并将内嵌块添加到.icon和.text。工作良好，我不知道内联块已经设置了一个有点宽度。我在解释事情上很糟糕，但感谢您的帮助，并查看网站，了解我的意思是改变尺寸！ – user3728587

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

回答

相关问题