読者です 読者をやめる 読者になる 読者になる

latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

2カラムスタイルのテスト

以下のスタイルを追加し

div.box {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: flexbox;
}
div.boxLeft {
    min-width: 50%;
}
div.boxRight {
    min-width: 50%;
}
pre.code {
    min-height: 50px;
}

コードブロックの上下に、box, boxLeft, boxRightを追加することで、
左にコードを書き、右で説明する的な記事が書けます。

<div class="box">
  <div class="boxLeft">
>|javascript|
function fn() {
}
||<
  </div>
  <div class="boxRight">
>|javascript|
なにもしないよ
||<
  </div>
</div>



function noOperation() {
}


なにもしないよ


ChromeとSafariとIE10で2カラム表示されます。Firefoxはよくわかりません

こういうやり方もありますね

div.flexbox {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: flexbox;
}
div.flexbox>pre.code:nth-child(1) {
    min-width: 50%;
}
div.flexbox>pre.code:nth-child(2) {
    min-width: 50%;
}


<div class="flexbox">
>|javascript|
function noOperation() {
}
||<
>|javascript|
なにもしないよ
||<
</div>

function noOperation() {
}
なにもしないよ