Fundación: anidamiento de objetos multimedia

Descripción

Puede anidar el objeto multimedia dentro de otra sección de objeto multimedia.

Ejemplo

El siguiente ejemplo demuestra el uso de objetos de medios anidados en Foundation:

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie = edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />

      <title>Nesting Media Objects</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Nesting Media Objects Example</h2>

      <div class = "media-object">
         <div class = "media-object-section">
            <div class = "thumbnail">
               <img src = "/foundation/images/kitchen_sink/winter.jpg" alt = "Nesting Media Objects">
            </div>
         </div>

         <div class = "media-object-section">
            <h4>Foundation</h4>
            <p>Foundation is a family of responsive front-end frameworks that
               make it easy to design beautiful responsive websites, apps and emails that
               look amazing on any device.
            </p>

            <div class = "media-object">
               <div class = "media-object-section">
                  <div class = "thumbnail">
                     <img src =  "/foundation/images/kitchen_sink/winter.jpg" alt = "Nesting Media Objects">
                  </div>
               </div>

               <div class = "media-object-section">
                  <h4>Foundation</h4>
                  <p>Foundation is a family of responsive front-end frameworks
                     that make it easy to design beautiful responsive websites, apps and
                     emails that look amazing on any device.
                  </p>

                  <div class = "media-object">
                     <div class = "media-object-section">
                        <div class = "thumbnail">
                           <img src =  "/foundation/images/kitchen_sink/winter.jpg" alt = "Nesting Media Objects">
                        </div>
                     </div>

                     <div class = "media-object-section">
                        <h4>Foundation</h4>
                        <p>Foundation is a family of responsive front-end
                           frameworks that make it easy to design beautiful  responsive
                           websites, apps and emails that look amazing on any device.
                        </p>
                     </div>
                  </div>

               </div>
            </div>

         </div>
      </div>

   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

  • Guarde el código html dado anteriormente nesting_media_objects.html archivo.

  • Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.