📌  相关文章
📜  如何使用引导程序在底部设置左侧图像和按钮的div？

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

我们可以通过以下两种方法将div的左侧图像和按钮设置在底部：

  • 方法1：使用引导程序

    向左飘浮

    这些实用程序类浮子左至左或禁用浮动，基于利用CSS的float属性的当前视口大小的部件。包含！important可以避免(避免)特异性问题。它们使用与我们的网格系统相同的视口断点。

    相对位置

    与CSS属性位置相同：relative 。

    绝对位置

    与CSS属性位置相同：absolute 。

    例子： 

    

    
        
        
        
        
        
        
  
        Set div with left image
      
        
    
    
        
    
            
    
            GeeksforGeeks
        
    
        
    
            
        
    
        
    
            
    Hey There..!!
    
            
    This is an Example..
    
            
    Here I have used class float-left of
            bootstrap to set div with left image.
    
            
    
        
    
        
    
            
    
                
            
    
        
    
    

    输出：

    注意：如果您的内容较少，请在内容的末尾放置
    标记，否则按钮将放错位置，因为它相对于内容而言位置较高。

    使用bootstrap 3，我们也可以通过bootstrap网格系统将div设置为底部的左侧图像和按钮，以及底部的右侧图像和按钮，如下所示：

    例子： 

    

    
        
        
        
        
        
        
  
        
        
  
        
        
  
        Set div with left image
        
    
    
        
    
            
    
                
    
                    
                
    
                
    
                    
    Hey There..!!
    
                    
    This is an Example..
    
                    
    Here I have used class pull-right of 
                      bootstrap to set div with right image.
                  
    
                    
    
                    
    
                
    
                
    
                    
                
    
            
    
            
    
                
    
                    
                
    
                
    
                    
    Hey There..!!
    
                    
    This is an Example..
    
                    
    Here I have used class pull-left of
                      bootstrap to set div with left image.
                  
    
                    
    
                    
    
                
    
                
    
                    
                
    
            
    
        
    
    

    输出：

    注意：由于引导网格系统在将代码在IDE上运行时的输出看起来会有所不同，因此请在您的源代码上运行此代码。

  • 方法2：使用Flexbox

    例子： 

    

    
        
        
        
        Set div with left image
        
    
    
        
    
            
    
            GeeksforGeeks
        
    
        
    
            
    
                
    
                    
                
    
                
    
                    
    
                        
    Hey There..!!
    
                        
    This is an Example..
                          
    
                        
    Here I have used Flexbox model 
                          to set div with left image 
                          and button at bottom.
    
                        
    
                    
    
                    
    
                        
                    
    
                
    
            
    
        
    
    

    输出：