html - 显示 : block. 垂直版本？

Question

这有点傻。什么是模拟显示的最佳方式: block 但垂直。你知道 display:block 是如何拒绝让相邻组件向左/向右移动的。拒绝顶部/底部邻居的最佳“显示:”是什么。

Answer 1

需要给父级设置竖写模式，在子级恢复横写模式。

body {
  writing-mode: vertical-lr;
}
div {
  writing-mode: horizontal-tb;
  border: 1px solid;
}

<div>Foo</div>
<div>Bar</div>
<div>Baz</div>

这样方 block 将不允许垂直堆叠，就像它们不能在水平模式下水平堆叠一样。但是，如果您有一些内联 block ，它们可能会垂直堆叠，就像它们在水平模式下水平堆叠一样。