html - nowrap wrapper 内的 div 断线

Question

我有 2 个 float div，我想将它们放在同一行上，它们加起来超过 1024 像素宽，因此它们需要水平窗口滚动，但尽管它们用 white-space:nowrap;< 包裹在一个 div 中 div 将中断并出现在两行上。我在这段代码中有什么问题吗？谢谢。

.wrapper{
          white-space:nowrap;
        }
.content{
         float:left; width:600px; height:20px;
        }

 <div class = "wrapper">
     <div class = "content" style = "background-color:red;"></div>
     <div class = "content" style = "background-color:blue;"></div>
 </div>  

Answer 1

为 .wrapper 指定固定宽度可以解决您的问题

.wrapper {
   white-space: nowrap;
   width: 1300px;
}

更新

或者，您可以为您的 .content 设置 display: table-cell 并为它们设置一个 min-width

.content {
  display: table-cell;
   height: 45px;
   min-width: 600px;
   overflow: auto;
 }