Question

enter image description here

情况就是这样：

我有一个带有2个div部分（红色和橙色）的主div，两者都有宽度：100％和高度：90％。（应该回应！）

在红色div内有一个导航栏（右上角为粉红色），中间有3个按钮。

aqua div必须高于红色和橙色div。

定位一切的正确方法是什么？

在红色和橙色div上使用relative不起作用，因为高度为'％'。

<div class="main">
    <div class="thedude"></div>
    <div class="first">
            <ul>
                <li> <a href="#"> Clients </a> </li>
                <li> <a href="#"> About Us </a> </li>
                <li> <a href="#"> Contact </a> </li>
                <li class="hasImage"><a href="#"> <img src="logo.png"> </a></li>
            </ul>
            <div class="timages">
                <a href="#"><img src="icon1.png"></a>
                <a href="#"><img src="icon2.png"></a>
                <a href="#"><img src="icon3.png"></a>
            </div>
    </div>

    <div class="second">

    </div>

</div>




*{
    margin: 0;
    padding: 0;
}

body{
    font-size: 100%; 
    font-family: arial;
}

.first{
    width: 100%; 
    height: 90%;
    background-color: #2acecd;
}

.thedude{
    width: 95em;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    background-image: url('yellow_creature.png');
    background-repeat: no-repeat;
    background-size: 100%, 100%;
    z-index: 500;
}

.second{
    width: 100%; 
    height: 90%;
    background-color: #f49900;
}

.third{
    width: 100%;
    height: 90%;
    background-color: #fbc00a;
}

.timages{
    margin:0 auto;
    width: 81%;
    padding-top: 23%;
    text-align: center;
    max-width: 62%;
}

.timages img{
    text-align: center;
    max-width: 100%;
}

ul{
    z-index: 540;
    position: absolute;
    right: 0;
    text-transform: uppercase;
}

li{
    float: left;
    padding: 2em 0.5em;
}

li a{
    text-decoration: none;
    color: white;
}

li img{
    max-width: 10em;
}

.hasImage{
    padding: 0.6em 0.5em;
}

http://jsfiddle.net/4z55sjn0/

Answer 1

您的HTML结构是主要问题。

HTML

<div class="main">
    <div class="thedude">
    <div class="first">

    </div>

    <div class="second">
            <ul>
                <li> <a href="#"> Clients </a> </li>
                <li> <a href="#"> About Us </a> </li>
                <li> <a href="#"> Contact </a> </li>
                <li class="hasImage"><a href="#"> <img src="logo.png"/> </a></li>
            </ul>
            <div class="timages">
                <a href="#"><img src="icon1.png"/></a>
                <a href="#"><img src="icon2.png"/></a>
                <a href="#"><img src="icon3.png"/></a>
            </div>
    </div>

    <div class="third">

    </div>
</div>
</div>

如果您想要橙色div上的菜单，则需要将其移动到橙色块内！

CSS

    .first {
    width: 30%;
    height: 90%;
    background-color: #2acecd;
    float:left;
    position:absolute;
    top:5%;
    z-index: 999 !important;
}
.thedude {
    width: 95em;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    background-image: url('yellow_creature.png');
    background-repeat: no-repeat;
    background-size: 100%, 100%;
    z-index: 500;
}
.second {
    width: 100%;
    height: 90%;
    background-color: #f49900;
    position:relative;
}
.third {
    width: 100%;
    height: 90%;
    background-color: #fbc00a;
}
.timages {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
}
.timages img {
    text-align: center;
    max-width: 100%;
}
ul {
    z-index: 540;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    list-style: none;
}
li {
    float: left;
    padding: 2em 0.5em;
}
li a {
    text-decoration: none;
    color: white;
}
li img {
    max-width: 10em;
}
.hasImage {
    padding: 0.6em 0.5em;
}

检查the updated fiddle。那是否接近你之后的事情？

更新（对此回答发表评论）

我已经交换了样式以克服误解。

检查updated fiddle。

我希望它有所帮助。

CSS定位：彼此3个div

1 个答案: