html - 2 个 div 在一行中，最大宽度

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。然后将菜单分成下一行。