内容
到了午夜，那个 div 在您的网站上仍然看起来像一个孩子的玩具箱。所有元素都是一团糟，每次您使用CSS的 展示 财产，他们重新安排自己成为完全不同的废话。
如果您像我一样，则可以通过喃喃自语并用键盘不断变得更具攻击性来解决此问题。尽管该策略以前对我有用，但我最近着手寻找一种更好的方法来理解 展示 财产。
事实证明 展示 比我最初想象的要简单得多。实际上，它们使用与打包手提箱相同的原理。我要掩饰 显示：块, 内联块 和 排队。如果您之前已经有条理地整理了行李箱，那么您会看到平行的东西。如果您是那种随便乱扔衣服的人–那么，我能为您做的只有那么多。
我们的手提箱将包含三种类型的衣服：
- 精致，像领衬衫
- 可以卷起的T恤
- 可能塞满缝隙的袜子或内衣
作为参考，如果我们用HTML对手提箱进行建模，则它将如下所示：
div class ='suitcase'> div class ='delicate'> / div> div class ='tshirt'> / div> div class ='tshirt'> / div> div class ='tshirt'> / div> div class = 'tshirt'> / div> div class ='袜子'> / div> div class ='tshirt'> / div> div class ='tshirt'> / div> div class ='tshirt'> / div> div class = 'tshirt'> / div> / div>
顶部的精致物品
显示：块 是大多数HTML元素的默认设置。这意味着元素占据了其容器内的整个水平空间 div。如果它在其他同级元素旁边，它将开始新的一行，并且不允许其他元素在其行上。它类似于放在行李箱顶部的精致物品。这些是精美或精巧的物品，例如衣领衬衫。您不希望它们起皱，因此请确保它们不会紧贴其他衣服。
这带来了最困难的部分之一 显示：块。请注意领衬衫如何不占据手提箱的整个宽度？这并不意味着其他项目会跳到它的水平。假设这件衬衫是手提箱宽度的60％；它仍然会阻止其他元素加入顶层。
这就是为什么图片中有橙色边框的原因。一种 显示：块 如果元素不占据整个水平空间，则会在其周围自动添加边距。
收拾得整整齐齐的T恤
您的大部分旅行箱可能装满了旅行中剩下的衣服。为了简单起见，我们将其缩减为T恤衫。关于折叠还是滚动更有效，互联网上存在着很大的争论。我是一个善于折叠的人。
无论如何，为了适合大多数物品，您需要并排排列T恤。就是这样 显示：行内块 是为。这些元素可以在同一行上紧挨着放置，也可以紧挨着 显示：内联 元素。
不像 显示：内联 元素 内联块 如果元素不适合其包含的元素，则将移至下一行 div 并排 内联块 元素。为了使T恤衫溅到下一行，您需要将其切成两半，然后用剩余的一半开始新的一行。 内联块 如果元素不适合一条线，则不允许拆分成两半。
填补空白的袜子
返回原始HTML，您会发现其中有一只袜子 div> 在八件T恤之间。但是，请看一下右侧手提箱的水平视图。如果有一只袜子 div>，如何结束中间行并开始最底行？这是目的 显示：内联!
一个 排队 如果元素的宽度超过 div （这种方式与 内联块 或者 堵塞）。自从我们的袜子 div 充满了随意塞入缝隙的袜子，它可以轻松地开始填充中间排右侧的缝隙，并溢出到下排。
无需将袜子切成两半即可。这就是为什么他们可以成为 排队，而T恤只能 内联块。如果中间排的T恤仅占宽度的60％，则袜子 div> 将向上移动以填充该行其余部分的整个空间。
一路顺风
这是我们手提箱的最终CSS：
.delicate {display：block;宽度：60％; } .tshirt {display：inline-block;宽度：20％; } .socks {display：inline; }
以下是一些替代方案，以说明显示的不同用途。如果上面的小东西有 显示：行内块，它们就可以和T恤一起放进去。一些T恤衫将移至最顶线，其余T恤衫将相应地进行调整。领衬衫的左右两侧将没有舒适的缓冲。
如果每件T恤都有 显示块，那么您将在彼此之间有大量的T恤衫，每行一件。如果袜子有 显示：行内块，它们都将位于最底行，而不是在两行之间流动。一些T恤将被推到另一行，形成第四行。 T恤中间排的右边会有一个缝隙。
使用我在此处概述的方法，我们最终得到了一个整齐的行李箱，可以充分利用可用空间。
本文最初出现在 网络杂志 发行289; 在这里买!
