0

我对我网站标题中的三个 div 有疑问：http ://www.pianoson.nl 。

我想要的是：

  • 中间菜单需要填满左右菜单之间的空间。当您缩小浏览器时，只有中间菜单也应该变小。

  • 中间菜单需要有一个最小宽度，所以它里面的文字不会被弄乱。

  • 目前，右侧菜单有时会下降到左侧菜单下方，但三个菜单应始终一起位于顶部。

    我希望这可以通过 css/html 实现。

    提前致谢！

    html页面：

    <body>
    <div id="menu">
        <div id="leftmenu">
            <a href="http://www.pianoson.nl">
                <div class="key white"ID="home">
                    <img src="http://www.pianoson.nl/images/home_32.png"></img>
                </div></a>

            <div class="key black"ID="Csharp"></div>

            <a href="http://www.pianoson.nl/genres.htm">
                <div class="key white"ID="repertoire">
                    <img src="http://www.pianoson.nl/images/music2_32.png"></img>
                </div></a>

            <div class="key black"ID="Dsharp"></div>

            <a href="http://www.pianoson.nl/samples.htm">
                <div class="key white "ID="samples">
                    <img src="http://www.pianoson.nl/images/music_32.png"></img>
                </div></a></div>

        <div ID="middlemenu"></div>

        <div id="rightmenu">

            <a href="https://www.linkedin.com/e/fpf/184174635">
                <div class="key white "ID="linkedin">
                    <img src="http://www.pianoson.nl/images/linkedin_32.png"></img>
                </div></a>

            <div class="key black"ID="Csharp"></div>

            <a href="https://www.facebook.comthijs.waleson">
                <div class="key white"ID="facebook">
                    <img src="http://www.pianoson.nl/images/facebook_32.png"></img>
                </div></a>

            <div class="key black"ID="Dsharp"></div>

            <a href="https://plus.google.com/u/0/112443072032497378793/">
                <div class="key white "ID="googleplus">
                    <img src="http://www.pianoson.nl/images/google_32.png"></img>
                </div></a></div>
    </div>

    和CSS页面：

    body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;}

div {
display: inline-block;}

#middlemenu {
height: 230px;
float: none;
width: 100%;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;}

.key {
    float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
    text-align:center;}

.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;}

.black {
background-color: #000000;
height:150px;
width: 24px;
    z-index: 3;
    margin-left:-15px;
    margin-right: -15px;}

.white:hover { 
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;}

.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;}

#menu{
width: 100%;
display: inline;
position: relative;}

#leftmenu{
float: left;}

#rightmenu{
float: right;}

div a div img{
vertical-align: -210px;
position: static;
bottom:5px; 
color: #000000;}
    • 4

    1 回答 1

    1

    这是你要找的吗。。

    将css修改为此

    body {
    background-color: #F2F2F2;
    width: auto;
    overflow: hidden;
}
div {
}
#middlemenu {
    height: 230px;
    margin-left: 130px;
    margin-right: 130px;
    min-width:300px;
    border: 1px solid #000000;
    position: relative;
    border-radius: 5px;
    z-index: 1;
}
#menu {
    width: 100%;
    position: relative;
}
#leftmenu {
    float: left;
}
#rightmenu {
    float: right;
    position:absolute;
    top:0;
    right:0;
}
div a div img {
    vertical-align: -210px;
    position: static;
    bottom:5px;
    color: #000000;
}
.key {
    float: left;
    border-radius: 5px;
    border: 1px solid #000000;
    position: relative;
    text-align:center;
}
.white {
    background-color: #FFFFFF;
    height: 230px;
    width: 40px;
    z-index: 2;
}
.black {
    background-color: #000000;
    height:150px;
    width: 24px;
    z-index: 3;
    margin-left:-15px;
    margin-right: -15px;
}
.white:hover {
    background-color: #FFFFFF;
    height: 345px;
    width: 60px;
    z-index: 1;
}
.key:hover img {
    position: static;
    vertical-align: -335px;
    bottom: 5px;
    padding: 14px;
}
    于 2013-08-13T17:38:26.547 回答