gpt4 book ai didi

css - 标题中的三个div,一个左,一个动态,一个右

转载 作者:太空宇宙 更新时间:2023-11-04 14:42:02 25 4
gpt4 key购买 nike

我的网站标题中的三个 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;}
  • 最佳答案

    这是你要找的吗..

    将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;
    }

    关于css - 标题中的三个div,一个左,一个动态,一个右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18213439/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com