定義リスト(dl)を、dt,ddを一セットずつフロートさせたい
という定義リストを
%dl
%dt(1)
%dd(1)
%dt(2)
%dd(2)
%dt(3)
%dd(3)
というように、dtとddを一セットずつ、横に3つずつ並べたい、
%dl
%dt(1) %dt(2) %dt(3)
%dd(1) %dd(2) %dd(3)
というケースがあったとします。
before,afterといった擬似セレクタと、floatを組み合わせ実現する方法を模索しましたが、困難でした。
しかし、どうしても効率よく自動でスタイリングしたい場合、
scssを使っているプロジェクトなら、次のように、
0,1,2,0,1,2...と変化するカウンタ変数($_counter)を用意し、
セル一個の幅($width)とこの$_counterを乗算し、
margin-leftの値を出すという構文で自動化できます。
> dl { position: relative; $list:name, age, address, phone, fax $width: 200px; $_counter: 0; @each $item in $list { dt.#{$item}, dt.#{$item} + dd { position: absolute; margin-left: $width * $_counter; height: 1em; } $_counter:$_counter+1; @if $_counter == 3 { $_counter: 0;} } }