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

请参阅此fiddle

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

我不确定为什么你需要一个绝对位置的图像和＆amp;图像容器，如果真的有必要，你需要给父母#classic一个高度。

或者您可以删除图像的绝对定位＆amp;像this

这样的图像容器

或者如果您希望图像流畅，只需将其宽度设置为100％而不是绝对定位

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

Answer 3

尝试将样式规则position:absolute和bottom:0提供给.bottom-menu element。这会将.bottom menu置于页面底部。希望这对您有用。

将div对齐在一起

3 个答案:

请参阅此fiddle