添付のように3カラムの記事をboxで括って表示します。
記事最下部のボタン位置が記事の長さによってバラバラになるのですが、この高さ位置を揃えるにはどうしたらよいでしょうか?
[html]
<div class="cover">
<div class="box1">
<h2>1カラム</h2>
<p>○○○○○○○○○○○○○○○
○○○○○○○○○○
○○○○○○○○
○○○○○○○○○○
○○○○○○○○○○○○○
○○○○○○○○</p>
<p>ボタンA</p>
</div>
<div class="box2">
<h2>2カラム</h2>
<p>△△△△△△△△△△△
△△△△△△△△△△△△
△△△△△△△△△
△△△△△△</p>
<p>ボタンB</p>
</div>
<div class="box3">
<h2>3カラム</h2>
<p>✕✕✕✕✕✕✕✕✕
✕✕✕✕✕✕✕
✕✕✕✕✕✕✕✕
✕✕✕✕✕✕✕✕✕✕
✕✕</p>
<p>ボタンC</p>
</div>
</div>
[css]
div.cover {
display: table;
width: 100%;
}
div.cover div.box1 {
display: table-cell;
width: 33.3%;
}
div.cover div.box2 {
display: table-cell;
width: 33.3%;
}
div.cover div.box3 {
display: table-cell;
}
No.1ベストアンサー
- 回答日時:
div.cover { ここに position:relative;を追加
ボタンはpタグで無くdivで囲い、class属性などで
position: absolute; bottom:0; を指定
<p>ボタンA</p> ⇒ <div class="katan">ボタンA</div>
・
・
.katan {position: absolute; bottom:0;}
ありがとうございます。
縦位置を揃えることはできました。
が、ボタン位置をセンタリングしたいのですが、
absoluteを使用するとセンタリングできなくなるのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
line-height指定で発生する余白...
-
html5でheaderの中にnav
-
一括で全体を右にずらす
-
HTML属性での「""」 「''」違い
-
article、section、hgroup?
-
オシャレな区切り線はありませ...
-
ブログのサイドバーが下にくる
-
htmlのolやulなどlistにtitleや...
-
RMS レフトナビ問題
-
divを追加すると下に隠れてしまう
-
html の divとtable の役割
-
【html&css】太さの違う2本線の...
-
見出しタグのつけ方について
-
htmlの見出しタグ(<h1>)の次...
-
html divボックスの入れ子で中...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
div要素が重なってします
-
携帯サイト、ナノでのタグ編集...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報