写真の下に説明を入れる感じの物を作ろうとしています。料理のメニューのような感じです。
lang
1 <div class="newlist"> 2 <ul> 3 <li><img src="images/dummy1.gif" width="200" height="200" /><br /> 4 <div class="newlisttxt">ここにジャンル<br /> 5 ここに名前 6 </div> 7 </li> 8 <li><img src="images/dummy1.gif" width="200" height="200" /><br /> 9 <div class="newlisttxt">ここにジャンル<br /> 10 ここに名前 11 </div> 12 </li>
また、この部分のCSSは以下の通りです。
lang
1.newlist { 2 padding:25px 0; 3 overflow:hidden; 4} 5.newlist ul { 6 margin: 0; 7 padding: 0; 8 list-style-type: none; 9} 10.newlist li { 11 padding-right:20px; 12 float: left; 13} 14.newlisttxt { 15 background-color:#A8E08D; 16 color:#FFF; 17 width:190px; 18 padding:10px 5px; 19}
横幅が200pxと狭いため、名前部分が長いと2行になってしまうものがあり、テキスト部分の高さがそろいません。
高さを固定にしてもいいのかもしれませんが、2行の高さで固定して1行だったら変ですし見る環境によって微妙にずれが出るのも避けたいので、出来れば自動で高さを揃えたいです。
この場合どのようにしたら高さを揃えられますか?
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/12/11 00:22
2014/12/11 00:54
退会済みユーザー
2014/12/11 01:52