0

HTMLとCSSで以下のレイアウトを作ろうとしています

|-----------------------------------------|
|box 1                                    |
|               -----------               |
|               | box 3   |               |
|---------------|         |---------------|
|---------------|         |---------------|
|box 2          |         |               |
|               |         |               |
|               |         |               |
|---------------|---------|---------------|

以下のコード（のようなもの）で、

<div class="box-one"></div>
<div class="box-two">
    <div class="box-three"></div>
</div>

.box-one {
    border: 1px solid red;
    height:50px;
    width: 400px;
}
.box-two {
    border: 1px solid green;
    height:100px;
    text-align : center;
    vertical-align: bottom;
    width: 400px;
}
.box-three {
    border: 1px solid black;
    height:120px;
    width: 50px;
}

デモjsFiddle

しかしbox-two、 text-align : center;&vertical-align: bottom;が適用されていないようで、出力は期待どおりではありません。これを修正する方法はありますか？

4

3 に答える 3

2 
.box-three {
    border: 1px solid black;
    height:120px;
    width: 50px;
    margin: -21px auto 0 auto;
}

http://jsfiddle.net/4a4aD/7/

または、もう少し一般的に:

.box-two {
    /* ... */

    position: relative;
}

.box-three {
    /* ... */

    position: absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    bottom:0;
}

http://jsfiddle.net/4a4aD/9/

于 2013-05-02T03:01:09.120 に答える