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

📅  最后修改于: 2021-05-25 16:14:31             🧑  作者: Mango

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

我们可以通过添加合适的Bootstrap类来防止内联块div包装。让我们借助示例了解这一点:

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

方法:为此,我们必须为每个表编写表标签以及称为表响应的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的用法。