insertar imágenes en vista de cuadrícula de 7 por 3

Estoy tratando de poner imágenes en una vista de tabla/cuadrícula simple de 7 X 3.

Pero no estoy obteniendo el resultado deseado. Probablemente estoy mirando en un lugar muy equivocado.

No quiero crear un visor ni nada...

Simplemente muestre las imágenes en una vista de cuadrícula de 7 X 3.

.floated_img
{
    margin-left: 10px
    width:140px; /* you can use % */
    height: auto;

}

<div class="floated_img">
    <img src="Picture1.png" alt="Some image">

</div>
<div class="floated_img">
    <img src="Picture2.png" alt="Another image">

</div>
....

¿Hay alguna plantilla que pueda descargar rápidamente y usarla para poner mis imágenes en ella?

Tengo las imágenes. Solo quiero alinearlas en una vista de tabla limpia y solo tomar una captura de pantalla.

preguntado el 08 de marzo de 13 a las 21:03

agregue float:left a sus imágenes, también aplique un arreglo claro al contenedor de los divs flotantes -

"Solo quiero alinearlos en una vista de tabla limpia" - Entonces, ¿por qué no usar una mesa? Sin flotante, sin clearfix, sin matemáticas, ... -

@Andreas Porque las tablas son para datos tabulares, no para diseño. -

@cimmanon Solo quiere hacer una captura de pantalla... -

2 Respuestas

Si no quieres lidiar con la mesa, puedes poner tus imágenes en LI:

ul {
    line-height: 0;
    font-size: 0;
}
li {
    display: inline-block;
    width: 14.28%; /* 100%/7 */
}
li img {
    display: inline-block;
    max-width: 100%;
}

http://jsfiddle.net/NnrEv/

respondido 08 mar '13, 21:03

Si está buscando una solución flotante, consulte esto http://jsfiddle.net/fSzxb/1/

.floater {
    float:left;
    ...
}
.floater.first {clear:both;}

/*clearfix*/
.cf:before,.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

y tu html

<div class="cf">
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

Por supuesto, puede usar algunos nombres de clase más semánticos, en lugar de floater y cf

respondido 08 mar '13, 21:03

Una pregunta muy novata. ¿Cómo inserto una imagen aquí? - Frazman

dentro de <div> las etiquetas agregan un <img> etiqueta. <div><img src=""/></div> o simplemente puede agregar el floater clase a las imágenes y omita los divs por completo - Dogoku

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.