将两个 div 块内联，同时将浏览器调整为最小宽度

Question

在下面的 html 布局中，我希望带有 'section' 和 'nav' id 的两个 div 标签彼此相邻，对于任何浏览器宽度甚至调整大小将浏览器调整到最小宽度，使它们保持内联。我从网上尝试了很多 css 代码，但我找不到任何解决方案，是否可能以及如何解决这个问题。顺便说一句，我可以给 'nav' div 一个固定的宽度，但是 'section' div 宽度应该保持为自动。

#header {
  text-align: center;
  padding: 5px;
}
#content {
  margin: 0 auto;
  width: 100%;
  float: left;
  display: inline-block;
}
#nav {
  line-height: 30px;
  float: left;
  padding: 5px;
}
#section {
  float: right;
  padding: 10px;
  border-top-left-radius: 20px 20px;
}
#footer {
  position: initial;
  clear: both;
  text-align: center;
  padding: 5px;
}

<div id="header">
  <h1>Header</h1>
</div>
<div id="content">
  <div id="nav">
    One<br>
    Two<br>
  </div>
  <div id="section">
    <h1>London</h1>
    <p>
      London is the capital city of England. It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.
    </p>
  </div>
</div>
<div id="footer">Copyright © whosebug.com</div>

Answer 1

如下更改您的CSS：您应该在导航和部分上使用 % 宽度，确保它们加起来不超过父级的 100%

#header {
           text-align:center;
           padding:5px;
       }
       #content {
           margin:0 auto;
           width:100%;
           float:left;
           display: inline-block; 
       }
       #nav {
           line-height:30px;
           float:left;
           padding:5px;
            max-width: 48%; 
       }
       #section {
           float:right;
           padding:10px;
           border-top-left-radius:20px 20px;
           max-width: 48%; 
       }
       #footer {
           position: initial;
           clear:both;
           text-align:center;
           padding:5px;
}

Answer 2

你可以试试

#nav {
  float: left;
  max-width: 75%; /* A maximum width to prevent it from
                     becoming wider than window. */
}
#section {
  float: none; /* Default value */
}
#content, #section {
  overflow: hidden; /* Clear float */
}

#header {
  text-align: center;
  padding: 5px;
}
#content {
  margin: 0 auto;
  width: 100%;
  float: left;
  display: inline-block;
  overflow: hidden;
}
#nav {
  line-height: 30px;
  float: left;
  max-width: 75%;
  padding: 5px;
}
#section {
  overflow: hidden;
  padding: 10px;
  border-top-left-radius: 20px 20px;
}
#footer {
  position: initial;
  clear: both;
  text-align: center;
  padding: 5px;
}

<div id="header">
  <h1>Header</h1>
</div>
<div id="content">
  <div id="nav">
    One<br>
    Two<br>
  </div>
  <div id="section">
    <h1>London</h1>
    <p>
      London is the capital city of England. It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.
    </p>
  </div>
</div>
<div id="footer">Copyright © whosebug.com</div>

Answer 3

只需将两个 div 的宽度设置为 50% 并将它们向左浮动 - 应该可以。

将两个 div 块内联，同时将浏览器调整为最小宽度

keep two div block inline while resizing browser to its smallest width

html

css

web