スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[HTML/jQuery] リストを2段組にする

このfc2ブログで言うと、右の「月別アーカイブ」サイドメニューに適応されています。 要は、下に示すようなリストを作りたいです。
  • item1
  • item2
  • item3
  • item4
  • item5
flexで作っておいて、heightパラメータで押しつぶせばおk。 割りとあっさりできました。

<div style="border:1px solid #000;padding:3px; width:300px;">
 <ul style="display:flex;flex-direction:column;flex-wrap:wrap;height:60px;">
  <li style="flex:0 0 auto;">item1</li>
  <li style="flex:0 0 auto;">item2</li>
  <li style="flex:0 0 auto;">item3</li>
  <li style="flex:0 0 auto;">item4</li>
  <li style="flex:0 0 auto;">item5</li>
 </ul>
</div>
要素数が増えれば、段組は勝手に増えます。
  • item1
  • item2
  • item3
  • item4
  • item5
  • itemx
  • itemx
  • itemx
  • itemx
  • itemx
  • itemx
  • itemx
  • itemx
  • itemx
全体の枠の大きさを固定しているので、要素がいくら増えても枠の大きさは変わりません。表の中の要素がちょっと窮屈。 枠の大きさではなく、要素の大きさを固定して、段組みを作ることを考えます。 cssだけでは出来ない、という結論に至ったのでjQueryでリストを操作することにします。
  • item1
  • item2
  • item3
  • item4
  • item5
  • itemx
  • itemx
  • itemx
  • itemx
  • itemx
  • itemx

<div style="border:1px solid #000;padding:3px; width:300px;">
 <ul style="display:flex;flex-direction:column;flex-wrap:wrap;width:50%" id="sample_20160908">
  <li style="flex:0 0 auto;">item1</li>
  <li style="flex:0 0 auto;">item2</li>
  <li style="flex:0 0 auto;">item3</li>
 </ul>
</div>

<script type="text/javascript">
<!--
$(document).ready(function(){
  var dom = $("#sample_20160908");
  dom.height(dom.height()*4/7);
});
// -->
</script>
はじめに、heightパラメータ無しでリストをレンタリング。その後、jQueryで高さを4/7に圧縮する。 当然、リストは溢れるのですが、flexとwidth:50%によって複数列に改行(改列?)して並ぶことにができます。 「月別アーカイブ」のような、勝手に要素数が増えるようなリストにも対応できます。
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

ブログ移転のお知らせ
ブログをshonen.hateblo.jpに移転します. 新規の記事はこちらに投稿します.
プロフィール

舞葉(ぶよう)

Author:舞葉(ぶよう)
github.io
はてなブログ(競プロ)

古い記事のソースコードは色分けしていないので、高機能テキストエディタに貼り付けたほうが見やすいかも。

検索フォーム
このブログについて
自分がつまづいた話題、なんとなく書きたいと思ったこと、ググったけど殆ど資料なかったぞオイ な話等をアップする予定。通りすがりでも、参考になっていただければと。プログラムの例外入力、メモリリークは責任負いません。投稿された記事は修正・削除する場合があります。
カテゴリ
タグ

HSP3アルゴリズムとデータ構造c++RubyJavaUnity画像解析C機械学習C#LinuxcodeIQKinectMinecraftTonyuSystemraspberrypiPythonHTML5音声制御Simulinkruby俺ルール通信制御Javascriptシミュレーション

counter-shinobi
固定記事
最新記事
最新コメント
月別アーカイブ
ブロとも申請フォーム

この人とブロともになる

アクセスランキング
[ジャンルランキング]
コンピュータ
635位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
94位
アクセスランキングを見る>>
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。