目的
- メニューを均等横並びにしたい。
- 各メニュー内の文字数が異なっても、メニューの高さ(height)は揃えたい。
- メニュー名、画像、テキスト、アンカーテキストの順に表示。
実行結果
メニュー①
森の奥に差し込む柔らかな光が、木々の葉を黄金色に染める。小川のせせらぎと鳥のさえずりが調和し、静かな時間が流れる。風に揺れる草の香りが心を落ち着け、自然の息吹を感じさせる一瞬。
メニュー②
湯気の立つカップから、香ばしいコーヒーの香りが漂う。ゆっくりと口に含むと、深いコクとほのかな甘みが広がり、心が静かにほぐれていく。朝の静かな時間や読書の合間に寄り添う、日常の小さな贅沢を感じさせる一瞬。
メニュー③
静かな部屋でページをめくるたび、物語がゆっくりと心に広がる。時間を忘れされてくれる、読書の穏やかなひととき。
HTML
<div class="layout_1_1">
<div>
<div>メニュー①</div>
<div><img src="../../image/sample-1.jpg" alt="サンプル画像①" /></div>
<div>森の奥に差し込む柔らかな光が、木々の葉を黄金色に染める。小川のせせらぎと鳥のさえずりが調和し、静かな時間が流れる。風に揺れる草の香りが心を落ち着け、自然の息吹を感じさせる一瞬。</div>
<div><a href="">＞＞続きを見る</a></div>
</div>
<div>
<div>メニュー②</div>
<div><img src="../../image/sample-2.jpg" alt="サンプル画像②" /></div>
<div>湯気の立つカップから、香ばしいコーヒーの香りが漂う。ゆっくりと口に含むと、深いコクとほのかな甘みが広がり、心が静かにほぐれていく。朝の静かな時間や読書の合間に寄り添う、日常の小さな贅沢を感じさせる一瞬。</div>
<div><a href="">＞＞続きを見る</a></div>
</div>
<div>
<div>メニュー③</div>
<div><img src="../../image/sample-3.jpg" alt="サンプル画像③" /></div>
<div>静かな部屋でページをめくるたび、物語がゆっくりと心に広がる。時間を忘れされてくれる、読書の穏やかなひととき。</div>
<div><a href="">＞＞続きを見る</a></div>
</div>
</div>
CSS
.layout_1_1 {
background-color: #FFFFFF;
display: table;
table-layout: fixed;
width: 94%;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
margin-right: auto;
margin-left: auto;
border: solid 2px #000000;
border-spacing: 10px 10px;
}
.layout_1_1 > div {
display: table-cell;
width: auto;
border: dotted thin #999999;
position: relative;
}
.layout_1_1 > div > div:nth-of-type(1) {
font-size: 20px;
text-align: center;
padding-top: 8px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #999999;
}
.layout_1_1 > div > div:nth-of-type(2) {
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
.layout_1_1 > div > div:nth-of-type(3) {
font-size: 12px;
line-height: 1.7;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 50px;
margin-left: 10px;
}
.layout_1_1 > div > div:nth-of-type(4) {
font-size: 16px;
text-align: right;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 0px;
position: absolute;
bottom: 0px;
right: 0px;
}
.layout_1_1 {
background-color: #FFFFFF;
display: table;
table-layout: fixed;
width: 96%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
border: solid 2px #000000;
border-spacing: 5px 5px;
}
.layout_1_1 > div {
display: table-cell;
width: auto;
border: dotted thin #999999;
position: relative;
}
.layout_1_1 > div > div:nth-of-type(1) {
font-size: 14px;
text-align: center;
padding-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #999999;
}
.layout_1_1 > div > div:nth-of-type(2) {
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
.layout_1_1 > div > div:nth-of-type(2) img {
width: 100%;
}
.layout_1_1 > div > div:nth-of-type(3) {
font-size: 10px;
line-height: 1.7;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 50px;
margin-left: 10px;
}
.layout_1_1 > div > div:nth-of-type(4) {
font-size: 11px;
text-align: right;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
position: absolute;
bottom: 0;
right: 0;
}
