El patrón de objeto multimedia es: imagen a la izquierda, encabezado y texto a la derecha.
Así lo llamó Nicole Sullivan y el nombre se quedó. Es un patrón bastante simple, pero como todo lo relacionado con el diseño web, se puede hacer de muchas maneras.
La versión de Bootstrap, que usa el diseño de tablas en v3 y flexbox en v4.
Echemos un vistazo a muchas de esas formas. En estas demostraciones, no me centro particularmente en las convenciones de nomenclatura, la semántica o la compatibilidad con navegadores. Solo posibilidades.
con flotadores
¡Ciertamente, podríamos hacer flotar la imagen hacia la izquierda!
Vea el Pen Media Block #1 de Chris Coyier (@chriscoyier) en CodePen.
Pero solo flotar significa que te envuelves. El envoltorio puede estar perfectamente bien, o puede que no lo desee.
Diría que en el patrón típico de objeto de medios, no hay envoltura.
Para arreglar eso, podríamos asegurarnos de que todo el texto esté envuelto en un elemento, luego asegurarnos de que ese elemento tenga un relleno izquierdo igual al ancho de la imagen y cualquier espacio en blanco entre ellos.
Vea el Pen Media Block #2 de Chris Coyier (@chriscoyier) en CodePen.
O bien, podría flotar en ambos lados:
Vea el Pen Media Block #3 de Chris Coyier (@chriscoyier) en CodePen.
Con caja flexible
¡Flexbox hace un trabajo rápido!
Vea el Pen Media Block #4 de Chris Coyier (@chriscoyier) en CodePen.
Tenga en cuenta que estamos permitiendo el <img> para convertirse en un artículo flexible. Nosotros usamos align-items: flex-start; para asegurarse de que no se estire a la misma altura que el texto.
Con Mesas
El objeto multimedia podría ser una fila de dos celdas de una tabla:
Vea el Pen Media Block #5 de Chris Coyier (@chriscoyier) en CodePen.
Si desea mantener no-<table> marcado, todavía es posible hacer que se comporte como una tabla a través de display: table;:
Vea el Pen Media Block #6 de Chris Coyier (@chriscoyier) en CodePen.
con rejilla
El diseño de cuadrícula nos permite definir un conjunto de columnas. Es bastante fácil configurar la primera columna con el ancho fijo que queremos y la segunda columna para ocupar el resto del espacio.
Vea el Pen Media Block #7 de Chris Coyier (@chriscoyier) en CodePen.
Al igual que en flexbox, podemos evitar que la imagen se estire alineándola en la parte superior con align-self: start;.
¡Estoy seguro de que todos pueden encontrar una docena más de formas de hacerlo!