Question

我想在浏览器调整大小时在一行中显示2个div。在所有屏幕上，它将显示在一行中，但现在它在浏览器调整大小时在第二行中断。

HTML

<div class="navbar" id="navbar">
    <a href="#" class="logo">
        <img src="logo.png">
    </a>
    <div class="topnav-con">
        <div class="menu-top-menu-container">
            <ul class="nav-menu" id="menu-top-menu">
                <li><a href="#">nav 1</a></li>
                <li><a href="#">nav 2</a></li>
            </ul>
        </div>                                  
    </div>
</div>

CSS

.navbar {
    .max-width: 1310px;
}
.logo {
    float: left;
    margin-left: 20px;
    margin-right: 25px;
}
.topnav-con {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #7A9CBD;
    clear: none;
    float: left;
    max-width: 1203px;
    width: 100%;
}

Answer 1

不要将.topnav-con的宽度保持为100％。

在课程.topnav-con和.logo

之间保持一定比例

.logo{
    width: 20%;
}
.topnav-con{
    width: 80%;
}

但是在显示导航栏时不太可取。保持比率直到某个min-width: 600px。然后将菜单分成下一行。

一行中有2个div，最大宽度

1 个答案: