Question

我正在尝试创建一个两列固定菜单布局，在屏幕的对面位置有两个项目。但是，通过使用 {height:100%;width:auto} 使图像元素“nav__logo”响应，它的父元素被调整大小以占据影响另一个元素的很大宽度（用黑色边框显示）。我如何防止这种情况发生？

附言我想找到一个使用 flexbox 而不是使用浮动的解决方案。

*{
    border: 1px black solid;
}


.nav{
    display: flex;
    justify-content: space-between;
    position: fixed;
    height: 100px;
    top: 0px;
    left: 0px;
    right: 0px;
}



.nav__logo{
  height: 100%;
  width: auto;
  padding: 1.7em;
  box-sizing: border-box;
}

.nav__linkWrap{
    display: flex;
    height:100%;
    width: auto;
    align-items: center;
    padding: 1.7 em;
}

.nav__linkWrap__link{
    display: flex;
    padding: 0 1.7em;
    box-sizing: border-box;
}

        <div class="nav">
            <div>
                <img class="nav__logo" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" id="header-img" width="100%">
            </div>
            <div>
                <nav id="nav-bar" class="nav__linkWrap">
                    <a href="#sect1" class="nav-link nav__linkWrap__link">Click Me</a>
                    <a href="#sect2" class="nav-link nav__linkWrap__link">Click Me</a>
                    <a href="#sect3" class="nav-link nav__linkWrap__link">Click Me</a>
                </nav>
            </div>
        </div>

Answer 1

将 .nav_logo 的高度更改为 100px，即导航栏的高度

position: relative;
right: 5px;

*{
    border: 1px black solid;
}


.nav{
    display: flex;
    justify-content: space-between;
    position: fixed;
    height: 100px;
    top: 0px;
    left: 0px;
    right: 0px;
}



.nav__logo{
  height: 100%;
  
  padding: 1.7em;
  box-sizing: border-box;
}

.nav__linkWrap{
    display: flex;
    height:100%;
    width: auto;
    align-items: center;
    padding: 1.7 em;
}

.nav__linkWrap__link{
    display: flex;
    padding: 0 1.7em;
    box-sizing: border-box;
}

如何根据高度大小调整图像大小而不影响父元素宽度

1 个答案: