Question

我有2个浮动div，我希望它们在同一条线上，它们一起宽度超过1024px，所以它们需要水平窗口滚动，但是尽管将它们包裹在一个带有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;
}

更新

或者，您可以为display: table-cell设置.content并为其设置min-width

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

Answer 2

您可以使用其他包装器解决：

  <html>
      <head>
         <style>
            .wrapper{
                position: relative;
                overflow:hidden;
                height: 20px;
            }
            .nowrap{
                white-space:nowrap; 
                width: auto;
                position: absolute;
                height: 20px;
            }
            .content{
                float:left; width:600px; height:20px;    
            }
         </style>
     </head>
     <body>
         <div class = "wrapper">
             <div class="nowrap">
                 <div class = "content" style = "background-color:red;"></div>
                 <div class = "content" style = "background-color:blue;"></div>
             </div>
         </div>  
     </body>
 </html>

在这种情况下，您必须关注height属性！仅在知道元素的高度时才使用此解决方案，例如，如果您创建图像滑块或类似的东西。

注释：

小心absolute位置。我用过它，因为在absolute position中，元素的维度没有在父元素内部关闭。你的两个div分成两行的原因是.content的容器元素没有absolute位置。一个绝对定位的元素总是应该在一个相对元素内（这就是为什么我使用了另一个包装器）所以你只能一起重复代码（不要将其他.nowrap div放在.wrapper {{ 1}}。

divs里面的nowrap包装破线

2 个答案:

更新