📜  如何防止内联块 div 包装?

📅  最后修改于: 2021-08-31 02:03:59             🧑  作者: Mango

display: inline-block;是 CSS 中的布局属性,不会在元素后添加换行符。因此,元素可以彼此相邻。 display的主要区别display: inline;display: inline-block;就是, display: inline-block;还允许我们设置元素的宽度和高度。

我们可以通过添加合适的 Bootstrap 类来防止内联块 div 被包装。让我们通过一个例子来理解这一点:

示例 1:我们必须显示使用合适的引导行和列类布置的多个表。问题在于,如果同一行中有多个表,则 Bootstrap 会将该行包装起来,并将下一个表推到下一行,如果它不适合内联(如果屏幕尺寸很小,就会发生这种情况)。但是我们希望这些表格对于所有屏幕尺寸都在同一行上(即我们不希望内联块元素环绕到下一行)。

方法:为此,我们必须为每个表编写 table 标记以及名为 table-responsive 的 Bootstrap 类。此类使所有表格具有响应性,以便它们对于所有类型的屏幕(来自 xs-lg)都位于同一位置,并且如果屏幕尺寸小以适合表格,表格会自动获得水平滚动条,用户可以通过向右滚动查看表格的额外内容。这也避免了表格的重叠并使页面看起来干净。

句法:

例子:



  

    
    
  
    
  
    
        Prevent inline-block 
        divs from wrapping
    
  
    

  

    
        
            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
header1header2header3header4
data1data2data3data4
data1data2data3data4
            
        
           
            
                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
header1header2header3header4
data1data2data3data4
                
            
            
                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
header1header2header3header4
data1data2data3data4
                
            
        
       
    
        
            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
header1header2header3header4
data1data2data3data4
            
        
        
            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
header1header2header3header4
data1data2data3data4
            
        
    
  

需要记住的一件重要事情是,响应式表格使用overflow-y: hidden ,它会剪掉超出表格底部或顶部边缘的任何内容。所以,如果你的表格很大,可以超出屏幕底部,那么最好在           

The white-space Property

    

white-space: nowrap:

       
        Cascading Style Sheets, fondly         referred to as CSS, is a simply          designed language intended to          simplify the process of making          web pages presentable. CSS          allows you to apply styles to          web pages. More importantly,          CSS enables you to do this         independent of the HTML that          makes up each web page.     
       

white-space: normal:

       
        Cascading Style Sheets, fondly          referred to as CSS, is a simply         designed language intended to          simplify the process of making          web pages presentable. CSS          allows you to apply styles to          web pages. More importantly,          CSS enables you to do this         independent of the HTML that          makes up each web page.     
  

输出:

如果您尝试在 IDE 中运行它,您会注意到第一个 div 块内的文本有white-space: nowrap;即使屏幕尺寸很小,也不会环绕到下一行。另一方面,如果第二个 div 标签中的文本不能放在同一行中,则它会换行到下一行。请运行代码并使用它以更好地理解 nowrap 的用法。