結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> .ボックス_1{float:left; height:300px; width:560px; border:dotted 2px red; border-radius:4px; margin:4px 0 4px 4px; padding-left:10px;} .カラム_1{float:left; column-count:1; width:100px; border:solid 1px silver; overflow-wrap:break-word; font-size:16px; font-weight:bold; margin:6px 10px 6px 0; padding:4px;} .カラム_2{float:left; column-count:2; column-gap:1em; width:200px; border:solid 1px silver; overflow-wrap:break-word; font-size:14px; font-weight:bold; margin:6px 10px 6px 0; padding:4px;} .カラム_3_200{float:left; column-count:3; column-gap:1em; width:200px; border:solid 1px silver; overflow-wrap:break-word; font-size:12px; font-weight:bold; margin:6px 10px 6px 0; padding:4px;} .レッド{float:left; height:18px; width:18px; border:solid 1px red; border-radius:4px; background-color:tomato; margin:2px;} .ブレイク::before{content:"\A"; white-space:pre;} </style> <div class="ボックス_1"> <div class="カラム_1"><div class="レッド"></div> フロート-レフト / カラム-1 で, ここに文字が入ります.<hr><div class="レッド"></div>フロート-レフト / カラム-1 で, ここに文字が入ります.</div> <div class="カラム_2"><div class="レッド"></div> フロート-レフト / カラム-2 で, ここに文字が入ります. フロート-レフト / カラム-2 で, ここに文字が入ります. フロート-レフト / カラム-2 で, ここに文字が入ります.<div class="ブレイク"></div><div class="レッド"></div>フロート-レフト / カラム-2 で, ここに文字が入ります. フロート-レフト / カラム-2 で, ここに文字が入ります.</div> <div class="カラム_3_200"><div class="レッド"></div> フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります.<div class="ブレイク"></div><div class="レッド"></div>フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります.<div class="ブレイク"></div><div class="レッド"></div>フロート-レフト / カラム-3 で, ここに文字が入ります.</div> </div> </html>