ホームページのネタ帳

高さ指定したボックスの一番下にボタンなどを配置する方法

2012年5月10日

高さ指定したボックスの一番下にボタンなどを配置する方法です。

 

■sample

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。

 

【html】

1
2
3
4
5
6
7
8
9
10
<div class="clear">
 <div class="sample">
  <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  <input type="button" value="ボタン" />
 </div>
 <div class="sample">
  <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
  <input type="button" value="ボタン" />
 </div>
</div>

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sample {
 float: left;
 width: 200px;
 height: 100px;
 margin: 0px 10px 0px 0px;
 padding: 15px;
 border: solid 1px #CCE0F8;
 position: relative;
}
.sample input{
 position: absolute;
 right: 5px;
 bottom: 5px;
}

 

※高さを指定している為、文字を拡大した場合は、
文字だけがはみ出してしまうので注意してください。



投稿タグ関連記事


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp