0

我有 2 个浮动 div，我希望它们位于同一行，它们的宽度超过 1024px，因此它们需要水平窗口滚动，但尽管将它们包装在 div 中，white-space:nowrap;但 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>
4

2 回答 2

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;
 }
于 2013-04-22T17:26:08.097 回答
1

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

  <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位置。绝对定位的元素始终应该在相对元素内（这就是我使用其他包装器的原因）所以您只能一起重复代码（不要将其他.nowrapdiv 放在.wrapper div.

于 2013-04-22T17:32:10.043 回答