Question

*, html, body { padding: 0; margin: 0; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; background: #ffe6eb; color: #4E2B99;}
.container { margin: 0px auto; max-width: 1000px; text-align: center; }
.header img { width: 5em; }

/* item */
.item { max-width: 500px; display: inline-block; }
.item .byf { font-style: italic; }
.item .byf-avatar { max-width: 1em; border-radius: 1em; }
.item .content { margin-top: 10px; min-height: 200px; background-color: white; border-radius: 5px; }

<html>
  <head>
    <title>Friends of Friends - Peach</title>
  </head>
  <body>
    <div id="container" class="container">
      <!-- Begin Header -->
      <div id="header" class="header">
        <img src="http://peach.cool/images/icon-peach-header-big@2x.png" alt="logo" />
      </div>
      <!-- End Header-->

      <!-- Begin Content -->
      <div id="content" class="content">
        <div id="items" class="items">

          <!-- Begin Item -->
          <div id="item-1" class="item">
            <span class="byf">Because you follow <img src="https://scontent.fcmh1-1.fna.fbcdn.net/v/t1.0-9/38600406_695730037430614_8379042433521942528_o.jpg?_nc_cat=103&oh=e3b71b3b819c1bd035c98057e5b7a69a&oe=5C4FEC80" alt="avatar-1" class="byf-avatar" /> <strong>Name</strong>... </span>
            <div id="content" class="content">
              <div class="content-list">
                <div class="content-list-item">
                  <span class="cli-name">Name</span> @<span class="cli-handle"></span>
                </div>
              </div>
            </div>
          </div>
          <!-- End Item -->

          <!-- Begin Item -->
          <div id="item-1" class="item">
            <span class="byf">Because you follow <img src="image" alt="avatar-1" class="byf-avatar" /> <strong>Name</strong>... </span>
            <div id="content" class="content">
              <div class="content-list">
                <div class="content-list-item">
                  <span class="cli-name">Name</span> @<span class="cli-handle"></span>
                </div>
              </div>
            </div>
          </div>
          <!-- End Item -->

        </div>
      </div>
      <!-- End Content -->
    </div>
  </body>
</html>

https://jsfiddle.net/56jgh7Lx/

我要尝试为其创建网格的各种项目（class="item"）。每个项目的最大宽度应为500，并且位于其中的容器的宽度应为1000px。当我在项目类上使用display：inline时，它将所有项目的宽度更改为1000px，显然不是我要的内容。如果使用display：inline-block，它将宽度更改为200像素左右。

我有点困惑为什么会这样，特别是因为我的宽度设置为最大500像素。我是CSS新手，很想学习和了解更多。

Answer 1

问题出在max-width，而不是display。 inline-block和inline都在做他们应该做的事情。在内联元素上，在CSS中应用的width不适用。他们在inline-block上这么做。

但是，CSS max-width仅在内容比max-width宽时才生效。目前，您的内容宽度不超过500像素。您需要设置width的{{1}}属性才能生效，

max-width

Answer 2

{display:inline-block;将采用高度，宽度并彼此相邻显示，而display:inline则不采用高度和宽度而是相互显示。为您max-width:500px工作，因为您的内容只有200px宽，如果您扩大内容，则将获得滚动效果，或者如果内容超过500像素，则内容将超出容器。

Answer 3

在理想的场景中，嵌入式容器不能容纳块级元素。在您的案例class =“ item”中，您尝试使内联保留class =“ content”的子元素，而class =“ content”的子元素是block元素，并且按预期，您的inline容器宽度将是block child元素的宽度。

使用内联代码块与内联代码，两者似乎都无法达到我的期望

3 个答案: