Question

我想要的只是（它应该）非常简单......我只想要一个3排布局每个让我们说33.33％的高度和100％的宽度。请记住，我插入幻灯片导航菜单（Facebook样式）我测试的所有东西都不合适，我试图保持固定第一个和最后一个div（位置固定）而绝对是第二个但是结果不是我想要的，因为div相互重叠，最后一个比其他人更大...... 我的HTML：

<div id="container">

    <!--The Hamburger Button in the Header-->
    <header>
        <div id="hamburger">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </header>

    <!--The mobile navigation Markup hidden via css-->
    <nav>
        <ul>
            <li><a href="#">menuitem 1</a></li>
            <li><a href="#">menuitem 2</a></li>
            <li><a href="#">menuitem 3</a></li>
            <li><a href="#">menuitem 4</a></li>
            <li><a href="#">menuitem 5</a></li>
            <li><a href="#">menuitem 6</a></li>
        </ul>
    </nav>

    <!--The Layer that will be layed over the content
    so that the content is unclickable while menu is shown-->
    <div id="contentLayer"></div>

    <!--The content of the site-->


        <div id="c1" class="ctn1">

        </div>
        <div id="c2" class="ctn2">

        </div>    
        <div id="c3" class="ctn3">

        </div>    

</div>

我的css：

.ctn1{
    z-index: 0;
    background:url(../img/tralicci.png);
    background-size: cover;
    width:100%;
    height:37%;
    position: fixed;
    top:5%; 
}
.ctn2{
    background:url(../img/paesaggio.png);
    background-size: cover;
    width:100%;
    height:37%;
    position:absolute;
    margin-top: 50%;
}
.ctn3{
    background:url(../img/skyrim.png);
    background-size: cover;
    width:100%;
    height:37%;
    position: fixed;
    bottom:0px;
    content: "";
}

结果应该是响应的（还要记住设备的旋转）谢谢

Answer 1

这是否实现了您正在寻找的布局：

http://codepen.io/anon/pen/XmpwNz

nav{
  position: absolute;
  left: 0;
  z-index: 5;
}

.ctn1{
    background: #333;
    height:33.33%;
    position: absolute;
    top: 0;
    width: 100%;
}
.ctn2{
    background: #222;
    height:33.33%;
    top: 33.33%;
    position:absolute;
    width: 100%;
}
.ctn3{
    background: #111;
    height:33.33%;
    position: absolute;
    bottom: 0;
    width: 100%;
}

三个div排布局cordova

1 个答案: