Html 分区'；在容器内并排放置

我正在开发一个基本上基于PHP的内部工作程序。我的问题是我有一个页眉，一个侧边导航，主要内容（在导航的右边）和一个页脚

我的问题是，我在一个容器中有两个DIV，nav设置为最小宽度的百分比，content部分设置为占用剩余空间。总的来说，导航和内容应该占屏幕总面积的91%

对于我认为相关的字段，我的CSS如下所示：

    .container{
        width: 100%;
        float: inline-block;
    }
    .header{
        float: left;
        text-align: left;
        background-color: lightblue;
        width: 100%;
        vertical-align: middle;
        display: block;
        border-radius: 15px;
    }
    .header h1{
        font-weight: bold;
        font-size: 40px;
        text-indent: 50px;
    }
    .msg_alert{
        background-color: green;
        color: white;
        width: 95%;
        padding: 5px;
        border-radius: 10px;
    }
    .err_msg_alert{
        background-color: red;
        color: white;
        width: 95%;
        padding: 5px;
        border-radius: 10px;
    }
    .menu{
        float: left;
        width: 13%;
        border: 3px solid grey;
        padding: 5px;
        background-color: lightgrey;
        border-radius: 15px;
        margin-top: 20px;
        margin-right: 20px;
        min-width: 200px;
    }
    .menu a{
        float: left;
        color: black;
        text-align: left;
        padding: 14px;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        margin: 3px;
        background-color: lightblue;
        width: 40%;
        min-width: 150px;
        border-radius: 15px;
    }
    .menu a:hover{
        background-color: grey;
        color: black;
    }
    .menu ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li{
        padding: 8px;
        margin-bottom: 7px;
    }
    .content{
        float: left;
        width: 78%;
        padding: 20px;
        margin-top: 20px;
        margin-left: 20px;
        /*border: 3px solid red;*/
    }
    .footer{
        display: inline-block;
        width: 100%;
        background-color: lightgrey;
        border-radius: 15px;
        font-size: 12px;
        text-align: center;
        margin-top: 5px;
        padding-bottom: 10px;
    }

我不确定我做错了什么。如果浏览器处于全屏状态，所有内容都会正确显示，但当我将其缩小到浏览器大小的3/4左右时，导航会保持在应有的位置，但内容会在下方移动

我已经设置了一个移动版本，它工作得很好，但是桌面模式是我遇到的问题

---

提前感谢您的帮助。

好吧，虽然

.menu

和

.content

的宽度在更宽的格式中加起来可能是100%或更少，但由于

.menu

的

最小宽度

像素设置，当您减小窗口宽度时，它们的宽度将超过100%，由于

的200px最小宽度：200px将远远超过您为其定义的13%宽度。因此（因为两者都是浮动），
.content
将位于
.menu
下方，因为
.content
旁边没有足够的空间容纳它

为了避免这种情况，您可以将这两个文件包装在
div
容器中，并将
display:flex
分配给该文件。另外，添加
flex-shrink:0（=允许变小）到
.content
。这基本上可以做到。（还有其他的细节，但只要看看一些关于flex的教程就可以了——其实一点也不复杂。）

另一种方法是将菜单宽度定义为200px（固定），将
.content
的宽度定义为
width:calc（100%-200px）
-父菜单的全宽减去200px，无论父菜单的宽度是多少

（这不计算填充、边距等）-你必须考虑在你使用的“实际”值）
这里是解决方案-< /P>
<div class="header"></div>
  <div class="menu_content">
    <div class="menu"></div>
    <div class="content"></div>
  </div>
  <div class="footer"></div>

    .menu{
    width: 13%;
    border: 3px solid grey;
    padding: 5px;
    background-color: lightgrey;
    border-radius: 15px;
    margin-top: 20px;
    margin-right: 20px;
    min-width: 200px;
}
.content{
    width: calc(100% - 21.7%);
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    border: 3px solid red;
}
.menu_content {
  display: flex;
  align-items: flex-start;
}
.menu_content::after {
  content: '';
  clear: both;
  display: block;
}


.菜单{
宽度：13%；
边框：3倍纯色灰色；
填充物：5px；
背景颜色：浅灰色；
边界半径：15px；
边缘顶部：20px；
右边距：20px；
最小宽度：200px；
}
.内容{
宽度：钙（100%-21.7%）；
填充：20px；
边缘顶部：20px；
左边距：20px；
边框：3倍纯红；
}
.菜单内容{
显示器：flex；
调整项目：灵活启动；
}
.菜单内容：：之后{
内容：''；
明确：两者皆有；
显示：块；
}
没有所谓的
float:inline block
这就是你想要的吗？谢谢@Johannes，但由于种种原因，我无法让它工作。我将阅读有关Flex的文章。似乎是一个非常有趣的工具，我没有利用。这就成功了！非常感谢。问题，为什么“.menu_content:：after{content:”；清除：两者；显示：block；}”