HOME > 開発者向けBLOG > Webデザイン >  ボックス内で下配置

Technology Note 開発者向けBLOG

Webデザイン

ボックス内で下配置

こんにちは、ゼノフィ渡部です。

ボックスの中で、ある要素を常に下表示させる方法をご紹介いたします。

大きくわけて3つの要素で構成します。

  1. 大枠部分
  2. 左のテキスト部分
  3. 右の要素を常に下に表示させる部分

まず、大枠部分にあたる「div.relative_box 」を「position: relative;」で相対指定します。

1
2
3

div.relative_box {
  position: relative; /* 相対指定 */
}

「div.left_box」の左ボックスと「div.right_box」の右ボックスを「float: left;」で横並びさせます。また、幅のwidth、左側のボックスにスペースを調整するマージンなど指定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

div.left_box,
div.right_box {
  float: left;
}
 
div.left_box {
  width: 150px;
  margin: 0 100px 0 0;
  padding: 5px;
  border: 1px solid #333;
  background: #CCC;
}
 
div.right_box {
  width: 100px;
}

次に、右ボックス内の「div.ab_bottom」を「position: absolute;」で絶対指定し、「bottom: 0;」で下の値を0にすることで、常に下に表示させるようにします。

1
2
3
4
5
6
7

div.ab_bottom {
  position: absolute; /* 絶対指定 */
  bottom: 0; /* 常に下に表示 */
  padding: 5px;
  border: 1px solid #333;
  background: #EEE;
}

左ボックスと右ボックスはフロートをしていますので、高さを調整する意味でクリアフィックスのテクニックを利用します。

1
2
3
4
5
6
7
8
9
10

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

クリアフィックスは大枠部分に「<div class="relative_box clearfix">」として指定します。

1
2
3
4
5
6
7
8
9
10

<div class="relative_box clearfix">
    <div class="left_box">
        テキストの量が増えても右の「常に下に表示されます。」が下に表示されます。画像でも同じことができます。テキストの量が増えても右の「常に下に表示されます。」が下に表示されます。画像でも同じことができます。
    </div>
    <div class="right_box">
        <div class="ab_bottom">
            常に下に表示されます。
        </div>
    </div>
</div>

以上で、左のテキストの量が多くなっても、常に右の要素が下に表示されるようになります。これは右の要素がimg要素(画像)でも同様のことができます。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

div.relative_box {
  position: relative; /* 相対指定 */
}
 
div.left_box,
div.right_box {
  float: left;
}
 
div.left_box {
  width: 150px;
  margin: 0 100px 0 0;
  padding: 5px;
  border: 1px solid #333;
  background: #CCC;
}
 
div.right_box {
  width: 100px;
}
 
div.ab_bottom {
  position: absolute; /* 絶対指定 */
  bottom: 0; /* 常に下に表示 */
  padding: 5px;
  border: 1px solid #333;
  background: #EEE;
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML

1
2
3
4
5
6
7
8
9
10

<div class="relative_box clearfix">
    <div class="left_box">
        テキストの量が増えても右の「常に下に表示されます。」が下に表示されます。画像でも同じことができます。テキストの量が増えても右の要素の「常に下に表示されます。」が下に表示されます。画像でも同じことができます。
    </div>
    <div class="right_box">
        <div class="ab_bottom">
            常に下に表示されます。
        </div>
    </div>
</div>

<

>

PAGETOP