0

いくつかのdivが別のdivの中に浮かんでいて、それらを下に揃えたいと思います。これはHTMLです：

<div class="magazinebookcase">        

    <div class="books">
    <a title="Mag1" style="height:286px;width:16px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag2" style="height:258px;width:48px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag3" style="height:252px;width:38px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag4" style="height:258px;width:50px;" href="">
    </a>
    </div>       
    <div class="books">
    <a title="Mag5" style="height:284px;width:14px;" href="">
    </a>
    </div>

    <div class="clearfix"></div>
</div>

そしてCSS：

.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;

} 

.magazinebookcase .clearfix {
clear:both;
}

.magazinebookcase .books {
text-align:center;
float:left;
position: relative;
vertical-align:bottom;
}

.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}

.magazinebookcase a:hover {
background-color: #ccc;
}

絶対位置から親戚などに変えて色々試してみましたが、ちゃんとできません。何か助けはありますか？

4

3 に答える 3

1

レイアウトにテーブルを使用しないでください。しかし、垂直方向の配置機能は非常に強力です。あなたはそのようなことをすることができます：

display: table-cell;
vertical-align: bottom;

それがどのように機能するかを示すjsFiddleを作成しました。

于 2012-11-05T11:17:35.370 に答える
0

CSSは次のようになります。

.left {
    display:block;
    position:relative;
    height:200px;
    float:left;
}

.bottom {
    position:absolute;
    bottom:0;
}

.clear {
    clear:both;
}

HTML

<div class="left">
    <div class="bottom"></div>
</div>
<div class="left">
</div>
<div class="clear"></div>
于 2012-11-05T11:05:04.840 に答える
-3

代わりにテーブルを使用してください。それは私の推薦です。各tdでvalign：bottomを使用します。

于 2012-11-05T11:05:00.777 に答える