两个DIV并排在较小的DIV中

Question

我试图在一个较小的DIV中并排放置两个DIV：溢出：隐藏; 我希望两个DIV都是并排的，并且它们的一些内容是隐藏的，因为它们的父DIV宽度较小。相反，最后一个DIV在另一个DIV下移动，即使它们都有浮动：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

我建议在子display: inline-block元素上使用<div>并在容器上使用white-space: nowrap;来阻止换行：

#wrapper {
  float: left;
  height: 300px;
  width: 300px;
  background-color: #eeeeee;
  overflow: hidden;
  /* prevents content wrapping to a new line */
  white-space: nowrap;
}
#nav {
  display: inline-block;
  width: 400px;
  height: 960px;
  background-color: red;
  /* purely to move the first element to the left,
     to show that both elements are on the same line: */
  margin-left: -200px;
}
#container {
  display: inline-block;
  width: 400px;
  height: 960px;
  background-color: green;
}

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

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

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

Answer 2

如果你想要两个元素并排，我认为你必须添加一个额外的＆＃34;包装＆＃34;某种元素围绕着#nav和#container元素。 （溢出设置为自动，因此您可以看到元素彼此相邻。）

示例：

＆＃13;

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;