表示：ブロック。垂直バージョン？

Question

これはちょっとばかげている。表示をシミュレートする最良の方法はブロックですが、垂直です。 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>

この方法のブロックはちょうど彼らがいない水平にすることができ、水平モードのように、縦に積み重ねることが許可されません。しかし、いくつかのインラインブロックがある場合、水平モードで水平にできるように垂直に積み重ねることができます。

Answer 2

display : flex;は

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    height: 100%; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
body > * { 
 
    padding: 1em; 
 
    background: gray; 
 
    margin: 1rem; 
 
} 
 
h2 { 
 
    margin: auto 1rem; 
 
} 
 
hr { 
 
    padding: 0; 
 
}

<h1> title</h1> 
 
<h2>subtitle <br/> to center ?</h2> 
 
<p>paragraph</p> 
 
<div> 
 
    <h3>sub sub title</h3> 
 
    <p>paragraph</p> 
 
</div> 
 
<hr/> 
 
<h1> title</h1> 
 
<h2>subtitle</h2> 
 
<p>paragraph</p> 
 
<div> 
 
    <h3>sub sub title</h3> 
 
    <p>paragraph</p> 
 
</div>

http://codepen.io/anon/pen/qavwpG