將div彼此對齊

Question

我有這個HTML：

<div id="container" class="container">

    <div id="menu-top">
        <div class="top-menu">
             <div class="top-menu-buttons">
                <button class="button button-icon ion-minus-circled"></button>
                <span>{{amount}}</span>
                <button class="button button-icon ion-plus-circled"></button>
            </div>
        </div>
    </div>

    <div id="classic" class="classic">
        <div id="classic-img" class="classic-img">
            <img ng-src="{{image.filtered}}" />
        </div>
    </div>

    <div id="menu-bottom">
        <div class="bottom-menu">
            <div class="bottom-menu-buttons">
                <button class="button button-icon ion-eye"></button>
                <button class="button button-icon ion-refresh"></button>
                <button class="button button-icon ion-crop"></button>
                <button class="button button-icon ion-android-options"></button>
                <button class="button button-icon ion-social-tumblr"></button>
            </div>
        </div>
    </div>

</div>

而這個CSS：

.container {
    width: 100%;
}

.classic {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-position: center center;
    background-image: url("../img/frames/postcard_00.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.classic-img {
    display: block;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 6%;
    left: 5%;
}

.classic img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.top-menu {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: red;
}

.top-menu-buttons {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    text-align: center;
}

.top-menu-buttons .button {
    display: inline-block;
    vertical-align: middle;
    font-size: 25px;
    color: white;
}

.top-menu-buttons span {
    display: inline-block;
    vertical-align: middle;
    font-size: 25px;
    color: white;
}

.bottom-menu {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: green;
}

.bottom-menu-buttons {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    text-align: center;
}

.bottom-menu-buttons .button {
    display: inline-block;
    vertical-align: middle;
    font-size: 35px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

我想要的結果是：

我從上面的代碼中得到的結果：

我的CSS的設計使得藍色內容位於紅色（頂部菜單）下方，綠色內容（底部菜單）位於藍色內容下方。 我找不到我犯的錯誤。

Answer 1

看到這個小提琴

position:absolute是罪魁禍首。

您必須從.classic-img和.classic-img img刪除它。 另外，移除height: 100%; 來自.classic-img img 。 因此更改后的CSS將如下所示

.classic-img {
    display: block;
    /* position: absolute; */
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 6%;
    left: 5%;
}

.classic-img img {
    /* position: absolute; */
    width: 100%;
    /* height: 100%; */
    top: 0;
    left: 0;
}

Answer 2

我不確定為什么要同時為圖像和圖像容器都需要一個絕對位置，如果確實需要，則需要給父類#classic一個高度。

或者您可以像這樣刪除圖像和圖像容器的絕對位置

或者，如果您希望圖像流暢，只需將其寬度設置為100％，而不是絕對定位

.classic-img img {
 width: 100%;
}

Answer 3

嘗試為.bottom-menu element賦予樣式規則position:absolute和bottom:0 。 這將在頁面底部顯示.bottom menu 。 希望這對您有用。