如何让不适合屏幕的Div停留在同一行上，而不是转到下一行？

-1

我有一个宽度为100％的div，它里面有很少的列（div）。当我们调整大小时，不适合的div会自动下降到下一行。我怎样才能让他们留下来，并有一个水平滚动呢？如何让不适合屏幕的Div停留在同一行上，而不是转到下一行？

.col { 
 
    float:left; 
 
}

<div class="wrapper"> 
 
    <div class="col">Text Text Text Text Text Text Text Text Text Text</div> 
 
    <div class="col">Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 </div> 
 
    <div class="col">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 </div> 
 
</div>

喜欢的东西THIS

提前感谢！

来源

2015-12-08 Alex McManns

您需要将您的工作代码添加到您的问题，请仔细阅读本关于如何要求对堆栈溢出http://stackoverflow.com/help/how-to一个很好的问题-askved = 0ahUKEwjY88S0jMzJAhWDcRQKHdzuAa4QFgggMAA＆URL = HTTP％3A％2F％2Fstackoverflow.com％2Fhelp％2Fhow到询问＆USG = AFQjCNEDXp3Jt0aiEKFPFI03PFSjhs3gAw＆SIG2 = Z7zAupFGKOoiAbjUgczi8A – Aaron

[这里的实施例]（http://jsfiddle.net/vhpr5mjk/1/） –

减小宽度你会看到，那些不适合的parentDivs，他们会去新的行！ –

我想你正在使用float作为内部div s。

您可以改为使用display:table-cell。这种风格迫使他们“保持在线”，就像你在上面的代码片段中看到的那样。

.wrapper { 
 
    white-space:nowrap; 
 
    overflow-x:auto; 
 
} 
 

 
.col { 
 
    display:table-cell; 
 
}

<h3>Longer</h3> 
 
<div class="wrapper"> 
 
    <div class="col">Text Text Text Text Text Text Text Text Text Text</div> 
 
    <div class="col">Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 </div> 
 
    <div class="col">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 </div> 
 
</div> 
 
<hr /> 
 
<h3>Shorter</h3> 
 
<div class="wrapper"> 
 
    <div class="col">Text Text Text Text Text Text Text Text Text Text</div> 
 
</div>

来源

2015-12-08 11:33:54

但我不能把保证金放在上面！ –

的确如此。为什么你需要为每个'div'设置'margin'？在'.wrapper'上设置'margin'。 –

Righ，这就是我所做的！谢谢！ –

如何让不适合屏幕的Div停留在同一行上，而不是转到下一行？

回答

相关问题