[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ただいまコメントを受けつけておりません。
2カラムをやる方法はいろいろある。
2カラムで表示したい親の要素のスタイルに display:box; 群を入れる。子ではない点に注意。
<div style="width: 500px;display:box;display: -webkit-box;display: -moz-box;border: 2px solid green;">
<div style="width: 200px; background-color: #ffa0a0;">
左側の箱<br />
<br />
左側の箱
</div>
<div style="width: 300px; background-color: #a0a0ff;">
右側の箱<br />
右側の箱
</div>
</div>
高さが何もしなくてもそろってくれるのが魅力。しかし、幅はきっちり指定しないと自動設定になるので注意。例えば以下のようになる。
<div style="width: 500px;display:box;display: -webkit-box;display: -moz-box;border: 2px solid green;">
<div style="background-color: #ffa0a0;">
左側の箱<br />
<br />
左側の箱
</div>
<div style="background-color: #a0a0ff;">
右側の箱<br />
右側の箱
</div>
</div>
<div style="width: 500px; border: 2px solid green;"> <div style="display: inline-block; background-color: #ffa0a0;">左側の箱</div> <div style="display: inline-block; background-color: yellow;"><br />中央<br />の箱</div> <div style="display: inline-block; background-color: #a0a0ff;"><br />右側の箱</div> </div>
底辺を自動でそろえてくれる。これだけだと box の方が便利そうだが、次のような使い方もできる。
<div style="width: 300px; border: 2px solid green;"> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> </div> <div style="width: 400px; border: 2px solid green;"> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; display: inline-block; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> </div>
検索結果をカード状にして並べて表示したい、といった場合に便利。
inline-block と似たようなことを float でも実現できる。
しかし、末尾の clear:left; がなければ後の要素の表示に影響する。それを意識して HTML を書く必要があり、あまりお勧めできない。
<div style="width: 300px; border: 2px solid green;"> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="margin: 5px; float:left; background-color: #ffa0a0; border: red double 2px; border-radius: 8px;">なんか<br />リストっぽい<br />アイテム</div> <div style="clear: left;"></div> </div>
ただいまコメントを受けつけておりません。