viewportの数値がでかいと無視される?1400とか。

いつもどおり、viewportを設定はい確認。
終わると思いきや終わらず。。

なぜかviewportを無視して、横スクロールが発生。

何故だ・・・

なぜかというと、デフォルトのminimum-scaleってやつは0.25が設定されているらしくこれが縮小の邪魔をする。

ということで、以下のようにwidthとminimun-widthを設定で難を逃れる。

<meta name="viewport" content="width=1400; minimum-scale=0;">

行ごとにdivやらliの高さを揃えたい。でもカラム数は変わる

jqueryAutoHeightなどは、カラム数を指定しないと行ごとに高さを揃えることが出来なかった。

ただ案件によっては文字数によってカラム数変わるけど行ごとに高さ変えたいって場合もあります。

自作しようと思いましたが、自分のスキルでは実現できず。。
ということでグーグル先生にお尋ね。

すぐにいくつか発見できました。
以下、参考にさせていただいたサイトです。

http://black-flag.net/jquery/20140610-5206.html

http://mach3.github.io/jquery-lineup/
今回はこっちを使用させていただきました。

勉強になるなぁ。。。

margin相殺とoverflow:hidden;

とある案件で各要素の上下の隙間をmarginで調整することがありました。

モジュール設計なのでh要素には上下○○px、P要素には上下○pxなど指定しつつ、お互いの距離は相殺を利用して大きい数字が採用される想定。

でも、モジュールを構成しているものにfloatなんかを使用していると、
その親要素でoverflow:hidden;で廻り込み回避しておりました。

が、そうなるとそのoverflow:hidden;をした要素の次に来る要素とはmarginの相殺はされずに加算されてしまうようです。

overflow:auto;にすれば大丈夫とあるが、ダメっぽく。。
しょうがないので、上下のマージンを調整するdivにはoverflowをかけずに、overflow用のdivを一枚かませることで回避。
→と思ったけど結局回避できない。
overflowより内側の要素に関しては、相殺から除外されてしまうもよう。

ちなみに、margin相殺の考え方でおもしろいなーとおもったのが、「お互いの心の距離」として考えると分かりやすいと。
Aさんは1m離れたい。Bさんは1.5m離れたい。このときに2.5mは必要ないと。1.5m離れれば事足りるよね、っていう考え方。

参考にしたサイトのURLが分からなくなってしまったので考え方だけお借りしました。