Open4

動的にタグ一覧を出力する際、2行固定でいい感じに配置する方法を考えてみる

kitakitakitakita

前提

  • タグの個数は動的
  • 2行固定
  • 画面外にいく場合はスクロールできるように
  • タグ間の余白は共通

kitakitakitakita

タグ一覧の全長(L)= タグ1〜タグnの幅の合計(W1 〜 Wn)+ 余白の合計(G × (n - 1))
※余白は一番最後にはつかないのでn-1

ulの子要素liの幅をそれぞれJSで取得して足す。
それに余白の合計も足す。

kitakitakitakita

JSで全長の半分の長さをulのwidthに指定する。

しかしこの方法だと
1行目と2行目のタグの長さがきちんと揃わないと、3行目に落ちてしまう。

図で言う赤い分をいくらか足せば実現できるが、タグの長さが任意のため調整が難しい。

kitakitakitakita

赤の追加する幅を長くすれば確実に2行でおさまる可能性が高くなるが
その分2行目の末尾にできる空白が長くなってしまう。

いい方法があればご教示いただきたいです。