基础 CSS 媒体对象

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。它有许多预建的网站组件，使我们的网站看起来很专业，并改善了网站的用户体验。 Foundation CSS 中这样一个有用的组件是媒体对象。

在本文中，我们将了解 Foundation CSS 的媒体对象组件。 Media 对象是一个非常有用的组件，用于显示图像以及一些内容，通常是文本与它不同的对齐方式。我们还可以使用媒体对象的不同特征创建嵌套的媒体对象和网格。

基础 CSS 媒体对象：

• media-object：该类是创建媒体对象的容器类。
• media-object-section：此类表示媒体对象的不同部分。
• stack-on-small：此类将允许图像获得 100% 的宽度，并且当屏幕尺寸变小时，文本将调整大小甚至堆叠。

部分对齐：在 Foundation CSS 中，默认情况下每个部分都与顶部对齐。现在，我们可以使用以下类更改每个部分的对齐方式：

• middle：此类将部分对齐到媒体对象容器的中间。
• 底部：此类将部分与媒体对象容器的底部对齐。
• align-self-middle：这个类将每个部分对齐到中间。
• align-self-bottom：此类将每个部分与媒体对象容器的顶部对齐。
• align-middle：该类一次将媒体对象容器的所有子部分对齐到中间。
• align-bottom：该类一次将媒体对象容器的所有子部分对齐到底部。

句法：

     ...
 

示例 1：以下示例包含两个媒体对象。第一个是底部对齐，第二个是中间对齐。但两者都反应灵敏。

HTML

  

    
    
  
    
    
    
  
    
    
    

  

    GeeksforGeeks
    Foundation CSS Media Object
      
Middle aligned media object
  
    
        
            
                
            
            
                Header of the first media object
                
                  This is the sample text for the displaying 
                  the media object in Foundation CSS. This
                  article about media object is published in
                  GeeksforGeeks website. GeeksforGeeks is the
                  best website for gaining knowlege about 
                  different technologies and computer subjects.
                  You can find lots of articles published on 
                  GeeksforGeeks website on Foundation CSS. It 
                  a great source for learning and mastering any
                  technology.GeeksforGeeks is the best website
                  for gaining knowledge about different technologies
                  and computer subjects. You can find lots of
                  articles published on GeeksforGeeks website 
                  on Foundation CSS. It a great source for 
                  learning and mastering any technology.
                
            
        
    
      
Bottom aligned media object
  
    
        
            
        
        
            Header of the second media object
            
              This is the sample text for the displaying 
              the media object in Foundation CSS. This
              article about media object is published in
              GeeksforGeeks website. GeeksforGeeks is the
              best website for gaining knowlege about 
              different technologies and computer subjects.
              You can find lots of articles published on 
              GeeksforGeeks website on Foundation CSS. It 
              a great source for learning and mastering any
              technology.GeeksforGeeks is the best website
              for gaining knowledge about different technologies
              and computer subjects. You can find lots of
              articles published on GeeksforGeeks website 
              on Foundation CSS. It a great source for 
              learning and mastering any technology.
            
        
    
  
    
        $(document).foundation(); 
    

  

输出：

示例 2：我们可以通过在另一个媒体对象中插入一个媒体对象来轻松创建嵌套媒体对象。

HTML

  

    
    
  
    
    
    
  
    
    
    

  

    GeeksforGeeks
    Foundation CSS Media Object
      
Middle aligned media object
  
    
        
            
                
            
        
        
            I'm the parent
            
                This is the sample text for the displaying 
                the media object in Foundation CSS. This
                article about media object is published in
                GeeksforGeeks website. GeeksforGeeks is the
                best website for gaining knowlege about 
                different technologies and computer subjects.
                You can find lots of articles published on 
                GeeksforGeeks website on Foundation CSS. It 
                a great source for learning and mastering any
                technology.GeeksforGeeks is the best website
                for gaining knowledge about different technologies
                and computer subjects. You can find lots of
                articles published on GeeksforGeeks website 
                on Foundation CSS. It a great source for 
                learning and mastering any technology.
            
  
            
            
                
                    
                        
                    
                
                
                    I'm the first child.
                    
                      This is the sample text for the displaying 
                      the media object in Foundation CSS. This
                      article about media object is published in
                      GeeksforGeeks website. GeeksforGeeks is the
                      best website for gaining knowlege about 
                      different technologies and computer subjects.
                      You can find lots of articles published on 
                      GeeksforGeeks website on Foundation CSS. It 
                      a great source for learning and mastering any
                      technology.GeeksforGeeks is the best website
                      for gaining knowledge about different technologies
                      and computer subjects. You can find lots of
                      articles published on GeeksforGeeks website 
                      on Foundation CSS. It a great source for 
                      learning and mastering any technology.
                    
                
            
            
                
                    
                        
                    
                
                
                    I'm the second child.
                    
                      This is the sample text for the displaying 
                      the media object in Foundation CSS. This
                      article about media object is published in
                      GeeksforGeeks website. GeeksforGeeks is the
                      best website for gaining knowlege about 
                      different technologies and computer subjects.
                      You can find lots of articles published on 
                      GeeksforGeeks website on Foundation CSS. It 
                      a great source for learning and mastering any
                      technology.GeeksforGeeks is the best website
                      for gaining knowledge about different technologies
                      and computer subjects. You can find lots of
                      articles published on GeeksforGeeks website 
                      on Foundation CSS. It a great source for 
                      learning and mastering any technology.
                    
                
            
            
        
    
  
    
        $(document).foundation(); 
    

  

输出：

参考： https://get.foundation/sites/docs/media-object.html