html - 两个 DIV 在较小的 DIV 中并排

Question

我试图在一个较小的 DIV 中并排放置两个 DIV，并带有 overflow:hidden; 我希望两个 DIV 并排放置，并且由于其父 DIV 的宽度较小而隐藏了其中的一些内容。相反，最后一个 DIV 移动到另一个 DIV 下面，即使它们都具有 float:left;。

HTML:

<div id="wrapper"> <!-- wrapper -->
    <div id="nav"> <!-- nav -->

    </div> <!-- /nav -->
    <div id="container"> <!-- container -->

    </div> <!-- /container -->
</div> <!-- /wrapper -->

CSS:

#wrapper {
    float:left;
    height:960px;
    width:540px;
    background-color:#eeeeee;   
    overflow:hidden;
}

#nav {
    float:left;
    width:460px;
    height:960px;
    background-color:red;
}

#container {
    float:left;
    width:540px;
    height:960px;
    background-color:green;
}

这是我想要的效果:

Answer 1

如果您想要并排放置这两个元素，我认为您必须添加某种额外的“包装器”元素来包围您的 #nav 和 #container元素。 (溢出设置为自动，因此您可以看到元素彼此相邻。)

示例:

#wrapper {
  float: left;
  height: 960px;
  width: 540px;
  background-color: #eeeeee;
  overflow: auto;
}
#wrap {
  width: 1000px;
}
#nav {
  float: left;
  width: 460px;
  height: 960px;
  background-color: red;
  clear:
}
#container {
  float: left;
  width: 540px;
  height: 960px;
  background-color: green;
}

<div id="wrapper">
  <!-- wrapper -->
  <div id="wrap">
    <!-- some new wrapping element -->
    <div id="nav">
      <!-- nav -->

    </div>
    <!-- /nav -->
    <div id="container">
      <!-- container -->

    </div>
    <!-- /container -->
  </div>
</div>
<!-- /wrapper -->