0

Mi problema es que no he logrado alinear los div de esta manera:
introducir la descripción de la imagen aquí

pero solo se muestra así:introducir la descripción de la imagen aquí


Los estilos y HTML son estos:

    .marco{
    	border: 1px solid #333;
    }
    .visual{
    	width: 100%;
    	text-align: center;
    	padding: 5px;
    }
    .rCalif{
    	width: 24.7%;
    }
    .alineados{
    	display: inline-block;
    }
	<section class="cuerpo">
    		<div>
    			<div class="title">
    				<div class="logo img alineados"><img src="img/logo.png"></div><div class="titulo alineados"><label>Identificación del evaluado</label></div>
    			</div>
    			<div class="datos-eval">
    			<!--Este div deveria alinearce-->
    				<div class="img alineados marco top">
    					<img src="img/logo.png">
    				</div>
    
    				<div class="datos-per alineados">
    				<div class="alineados">
    					<label class="marco visual">Nombre Nombre Apellido Apellido</label><br>
    					<label class="marco visual">Antiguedad:</label><br>
    					<label class="marco visual">Edad:</label><br>
    					<label class="marco visual">Cargo:</label><br>
    					<label class="marco visual">Centro de costo:</label><br>
    					<label class="marco visual">Domicilio:</label><br>
    					<label class="marco visual">Nivel de estudio:</label><br>
    				</div>	
    				<div class="alineados">
    					<label class="visual"></label><br>
    					<label id="Antiguedad" class="marco visual">2</label><br>
    					<label id="edad" class="marco visual">21</label><br>
    					<label id="Cargo" class="marco visual">Cargo</label><br>
    					<label id="CentroCosto" class="marco visual">Centro de costo</label><br>
    					<label id="Domicilio" class="marco visual">Domicilio</label><br>
    					<label id="NivelEstudio" class="marco visual">Nivel de estudio</label><br>
    				</div>
    
    				<!--Este div deveria alinearce-->				
    				<div class="alineados">
    					<label class="marco visual">Fecha de evaluacion</label><br>
    					<input class="marco form-control" type="text" name="fechaEvaluacion"><br>
    					<label class="marco visual">Periodo de evaluacion</label><br>
    					<input class="marco form-control" type="text" name="periodoEvaluacion"><br>
    					<label class="marco visual">Evaluador(es)</label><br>
    					<input class="marco form-control" type="text" name="periodoEvaluacion"><br>
    				</div>
    				
    				</div>
    				<div class="resultados">
    					<div class="alineados rCalif">
    						<label class="marco visual">% Asistencia</label><br>
    						<label id="asis" class="marco visual">100</label>
    					</div>
    					<div class="alineados rCalif">
    						<label class="marco visual">Promedio calificaciones</label><br>
    						<label id="califica" class="marco visual">7</label>
    					</div>
    					<div class="alineados rCalif">
    						<label class="marco visual">Valoracion criterios</label><br>
    						<label id="criterios" class="marco visual">bueno</label>
    					</div>
    					<div class="alineados rCalif">
    						<label class="marco visual">Valoración c. aprendizaje</label><br>
    						<label id="cAprendizaje" class="marco visual">bueno</label>
    					</div>
    				</div>
    
    			</div>
    		</div>
    	</section>

1
  • 1
    .alineados si siempre van a estar de 4 en 4, puedes hacer que sean display: block; float: left; width: 25% (o tamaños que desees poner); o usar flex. Flex es una propiedad que poco a poco va ganando adeptos para este tipo de situaciones
    – Zander
    el 11 oct. 2017 a las 15:59

1 respuesta 1

0

Creo que con:

 .alineados:{
            vertical-align: top;
            display: inline-block;
        }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.