結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> .コンテナ_1{height:310px; width:1158px; border:solid 1px gray; border-radius:4px; margin:4px;} .コンテナ_2{height:152px; width:1158px; border:solid 1px gray; border-radius:4px; margin:4px;} .ボックス_1{float:left; height:300px; width:560px; border:dotted 2px red; border-radius:4px; margin:4px 0 4px 4px; padding-left:10px;} .ボックス_2{float:left; height:300px; width:220px; border:dotted 2px green; border-radius:4px; margin:4px 0 4px 4px; padding-left:10px;} .ボックス_3{float:left; height:300px; width:320px; border:dotted 2px blue; border-radius:4px; margin:4px 0 4px 4px; padding-left:10px;} .ボックス_4{float:none; height:140px; width:1136px; border:dotted 2px purple; 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;} .カラム_3_300{float:left; column-count:3; column-gap:1em; width:300px; border:solid 1px silver; overflow-wrap:break-word; font-size:12px; font-weight:bold; margin:6px 10px 6px 0; padding:4px;} .カラム_6{float:left; column-count:6; column-gap:2em; width:1120px; 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;} .グリーン{float:left; height:18px; width:18px; border:solid 1px green; border-radius:50%; background-color:lightgreen; margin:2px;} .ブルー{float:left; border-right:9px solid transparent; border-bottom:16px solid blue; border-left:9px solid transparent; } .パープル{float:left; height:10px; width:10px; background-color:purple;} .ブレイク::before{content:"\A"; white-space:pre;} </style> <div class="コンテナ_1"> <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> <div class="ボックス_2"> <div class="カラム_2"><div class="グリーン"></div> フロート-レフト / カラム-2 で, ここに文字が入ります. フロート-レフト / カラム-2 で, ここに文字が入ります. フロート-レフト / カラム-2 で, ここに文字が入ります.<div class="ブレイク"></div><div class="グリーン"></div>フロート-レフト / カラム-2 で, ここに文字が入ります. フロート-レフト / カラム-2 で, ここに文字が入ります.</div> </div> <div class="ボックス_3"> <div class="カラム_3_300"><div class="ブルー"></div> フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります.<div class="ブレイク"></div><div class="ブルー"></div>フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります.<div class="ブレイク"></div><div class="ブルー"></div>フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります. フロート-レフト / カラム-3 で, ここに文字が入ります.</div> </div> </div> <div class="コンテナ_2"> <div class="ボックス_4"> <div class="カラム_6"><div class="パープル"></div> フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります.<div class="ブレイク"></div><div class="パープル"></div>フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります.<div class="ブレイク"></div><div class="パープル"></div>フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります.<div class="ブレイク"></div><div class="パープル"></div>フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります.<div class="ブレイク"></div><div class="パープル"></div>フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります.<div class="ブレイク"></div><div class="パープル"></div>フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります. フロート-レフト / カラム-6 で, ここに文字が入ります.</div> </div> </div> </html>