css「要素の高さをそろえる」メモ

サイトの方、要素の高さをそろえたいとき。

参考サイト：
CSSのみで横並びの要素の高さを揃える | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website

この中の、”最大の行数を固定とする”というやり方で、簡単にできました。
行数が変わったら、その都度変更が必要ですが、少し大きめにしておいたら大丈夫でしょう。

こういうのも。

参考サイト：
高さの異なるボックスを横に並べるならfloatよりinline-blockが便利 - スタイルシートTipsふぁくとりー

ここは更新が2017年7月なので、新しくていいかと。

とりあえずのメモ。
不具合がでたときの修正用。ｗ


とりあえず、Jimdoのヘッダー内に入れた設定をここにメモ。
（2017.08.05）

pick up !

今年の暑中見舞・残暑見舞は、アイスコーヒーと、メロンソーダ☆どっちにします？


>> download

css

/* google font ここはあまり関係ないです*/


<link href="https://fonts.googleapis.com/css?family=Lobster"
 rel="stylesheet" type="text/css"></link>

/* TOP ピックアップ*/
.pickup{
    background-color:#fffff0;
    padding: 10px 10px 10px 10px;
    margin:0 0;
    color:#808080;
    overflow:hidden;height:22em;
}
.pickup h3{
    color:#deb887;
    font-size:20px;
}
.pickup img  {
    display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom:20px;
}

html（ウィジェット）

<div class="pickup">
    <h3 style="font-family: 'Lobster', cursive; margin: 20px; font-size:28px;">
        pick up !
    </h3>
    <img src="画像image.jpg" alt="" />
    <div style="font-size: 80%;">
        <p>小さい文字の文章</p>
        <p><a href="ページURL" title="DL" style="color:#ff6347;
　　　　letter-spacing:0.1em;">

 　　　　　download</a>
        </p>
    </div>
</div>