0

同じ行に配置したい2つのフローティングdivがあり、それらは幅が1024pxを超えているため、水平ウィンドウスクロールが必要ですが、それらをdivでラップしてもdivwhite-space:nowrap;が壊れて2行に表示されます。私はこのコードで何か間違っていますか？ありがとう。

.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要素の寸法が親要素内で閉じられないため、私はそれを使用しました。2 つの div が 2 行に分割された理由は、のコンテナー要素に位置.contentがなかったためabsoluteです。絶対配置要素は常に相対要素内にある必要があります (これが私が他のラッパーを使用した理由です) したがって、コードを一緒にのみ繰り返すことができます ( ..nowrap内に他の div を配置しないでください) .wrapper div。

于 2013-04-22T17:32:10.043 に答える