Question

在下面的html布局中，我希望两个div标签带有＆＃39; section＆＃39;和＆＃39; nav＆＃39; id保持彼此相邻，对于任何浏览器宽度，甚至将浏览器调整到最小宽度，将它们保持为内联。我尝试了很多来自网络的CSS代码，但我找不到任何解决方案，是否可能，我怎么能解决这个问题。顺便说一句，我可以给“导航”一个固定的宽度。 div但是＆＃39;部分＆＃39; div宽度应保持自动。

＆＃13;

#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;
}

＆＃13;

<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 © stackoverflow.com</div>

＆＃13;

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 © stackoverflow.com</div>

Answer 3

只要给两个div的宽度为50％并将它们向左浮动 - 应该可以工作。

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

3 个答案: