[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>Divの高さを揃える方法 (css版)
Divの高さを揃える方法 (css版)
先日Javascriptでカラムの高さを揃えるというエントリーをしたのだが[CSS]高さの異なるカラムを揃えるスタイルシートでCSSで高さを揃える方法が紹介されている。
肝はpadding-bottomとmargin-bottomに指定する+-32768px。こんなやり方もあったんだと感心させられる。
HTMLサンプル
HTML
- <div id="CssBlock01">
- <div id="CssLeft">
- <h5>左側</h5>
- <p>CSSで高さをそろえるテスト</p>
- </div>
- <div id="CssCenter">
- <h5>中央</h5>
- <p>CSSで高さをそろえるのはなかなかﾑﾂｶｼｲのでこの方法でできるとなるとすごく便利だと思われる。</p>
- </div>
- <div id="CssRight">
- <h5>右側</h5>
- <p>てすと</p>
- </div>
- </div>
CSSサンプル
CSS
- #CssBlock01 {
- background-color: #CCCCCC;
- width: 450px;
- padding: 10px;
- border: 5px solid #000000;
- overflow: hidden;
- }
- #CssBlock01 div {
- float: left;
- margin-right: 5px;
- margin-left: 5px;
- width: 120px;
- border: 1px solid #FFFFFF;
- }
- #CssLeft {
- background-color: #99CCCC;
- padding-bottom: 32768px;
- margin-bottom: -32768px;
- }
- #CssCenter {
- background-color: #99CC99;
- padding-bottom: 32768px;
- margin-bottom: -32768px;
- }
- #CssRight {
- background-color: #CC9999;
- padding-bottom: 32768px;
- margin-bottom: -32768px;
- }
親要素には「overflow: hidden;」、子要素に「padding-bottom: 32768px;」と「margin-bottom: -32768px;」を指定することで下記のようになる。
実行結果
左側
CSSで高さをそろえるテスト
中央
CSSで高さをそろえるのはなかなかﾑﾂｶｼｲのでこの方法でできるとなるとすごく便利だと思われる。
右側
てすと
原理的に子要素の下のボーダーを表示することは出来ないと思われる。また親要素の下とくっついてしまうのにも注意。もっとも解決する方法があるかもですが。
そこらへんがOKなパターンであれば利用価値は大ですね。横の値としても使えそうだしリキッドレイアウトが楽に出来そう。
| 投稿日 | 2007年10月30日 22:21 |
|---|---|
| カテゴリ | HTML/CSS |
| タグ | インターフェイス |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1127 |
コメント