Foros del Web » Creando para Internet » CSS »

maquetando con flex

Estas en el tema de maquetando con flex en el foro de CSS en Foros del Web. buenas, estoy intentado maquetar esta parte de mi web con flex : si la imagen es más cuadrada no hay problema.. pero a la que ...
  #1 (permalink)  
Antiguo 09/12/2014, 23:18
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 10 meses
Puntos: 0
maquetando con flex

buenas, estoy intentado maquetar esta parte de mi web con flex :


si la imagen es más cuadrada no hay problema.. pero a la que se alarga un poco se me descuadra y queda un poco feucho.. alguna solución? para que el texto... mida lo mismo que la imagen? el contenedor lo mide... pero claro todo lo que falta de texto es espacio en blanco y no me gusta como queda...

el codigo html , viene de una consulta php "esta por terminar":
Código:
echo("<SECTION class=\"datoslibro\">
		<section class=\"datos\">
		<H2>".$datos[0][1]."</H2><BR><label for=\"autor\"><B>".Autor.":</B></label><span class=\"letra\">".$datos[0][2]."</SPAN><BR>
		<label for=\"ilustrador\"><B>".Ilustrador.":</B></label><span class=\"letra\">".$datos[0][3]."</SPAN><BR>
		<label for=\"editorial\"><B>".Editorial."</B></label><span class=\"letra\">".$datos[0][4]."</SPAN><BR>
		<label><B>".ISBN.":</B></label><span class=\"letra\">978-84-460-3832-0<HR></SPAN>
		<label for=\"definicio\"><B>".Definicion.":</B></label><BR>
		<label for=\"edicio\"><B>".Edicion.":</B></label><BR>
		
		<label for=\"coleccion\"><B>".Coleccion.":</B></label><BR>
		<label for=\"Subserie\"><B>".Subserie.":</B></label><BR>
		<label for=\"medidas\"><B>".Medidas.":</B></label><BR>
		<label for=\"paginas\"><B>".Paginas.":</B></label><BR>
		<label for=\"genero\"><B>".Genero.":</B></label><BR>
		<label for=\"incluye\"><B>".Incluye.":</B></label><BR>
		<label for=\"premio\"><B>".Premio.":</B></label><BR>
		
		<label for=\"tipuslletra\"><B>".Tipo_letra.":</B></label><BR>
		<label for=\"MaterialA\"><B>".Material_adicional.":</B></label>adfafdafadfa<BR>
		<label for=\"ebook\"><B>".Disponible_ebook.":</B></label><BR>
		<label for=\"tematica\"><B>".Tematica."</B></label><BR>
		<Label for=\"edatr\"><B>".Edad_recomendada."</B></label><BR>
		<label for=\"dificultat\"><B>".Dificultad_lectora."</B></label><BR>
		<label for=\"lecturac\"><B>".Lectura_compartida.":</B></label><BR>
		<label for=\"ades\"><B>".Aspectos_destacables.":</B></label><BR>
		<HR>
		</SECTION>
		
		<SECTION class=\"fichalibro\"><img src=\"..\imagenes\piratas.png\">
		</SECTION>
		</SECTION>
		
		<SECTION class=\"res\">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth,
		the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
		Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example,
		which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
		</SECTION>
		
		");
y el css implicado :

Código:
.fichalibro { background-color:green;border-radius:5px; font-family:'Kavoon';align-self: flex-end;flex-shrink:1; width:40%;  margin:0,5% 2%;}
	.fichalibro img { width:100%;}

.res { width:80%; margin: 1% auto; font-family:'Montserrat';font-size:1.4em;}
.datoslibro{ display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; align-items:stretch; margin:0,5% auto; line-height:2em; padding:0;}
	.datoslibro label {  display:inline; width:300px;}
	SECTION HR { margin: 1% auto;}
.datos { border:none; padding:0; margin:1%;font-family:'Montserrat';font-size:1.4em; box-shadow:none; width:55%;}
.datos h2 { font-size:2em;}
  #2 (permalink)  
Antiguo 10/12/2014, 01:22
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: maquetando con flex

buenas.. sigo trabajando en ello... a ver he quitado todos los BR y los <B> me parecia un poco feo ahora que he tenido que postearlo JAJAJAJA . y ... he anidado un contenedor flex en datos: y con justify-content: space-around; he conseguido que casi se ajustara del todo.... pero aun quedaba una pequeña diferencia... al final le he puesto un position relative y bottom: -5px al hr pero no me acaba de gustar..

a ver si alguien tiene una solución más atractiva.

Última edición por jhz1983; 10/12/2014 a las 01:28
  #3 (permalink)  
Antiguo 10/12/2014, 16:26
 
Fecha de Ingreso: septiembre-2012
Mensajes: 74
Antigüedad: 12 años, 2 meses
Puntos: 4
Respuesta: maquetando con flex

Hola friend! Para lo que pides flex es especial =)

Te dejo un enlace para que tengas ejemplos de como pueden quedar...
http://css-tricks.com/snippets/css/a-guide-to-flexbox

Si estás haciendo algo en valenciano, intentaré ayudarte por preservar el idioma.


Con un align-items: center se te alinearía siempre al centro el contenido aunque aun asi tampoco se te quedaría siempre hasta el final de la foto.

Ya que eres de por aquí estaría dispuesto a echarte una mano con la maquetación.. quizá te interese trabajar juntos. Un saludo

Última edición por pzin; 11/12/2014 a las 01:50
  #4 (permalink)  
Antiguo 11/12/2014, 01:51
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: maquetando con flex

Publicar código PHP en el foro de CSS es un poco extraño. Si acaso publica el HTML. Aquí con PHP no hacemos gran cosa.
__________________
(:

Etiquetas: background, color, flex, html, php, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:30.