how to align the div above?

0

My problem is that I have not managed to align the div in this way:

but it's only shown like this:


Styles and HTML are these:

    .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>
    
asked by Kevin 11.10.2017 в 17:52
source

1 answer

0

I think with:

 .alineados:{
            vertical-align: top;
            display: inline-block;
        }
    
answered by 11.10.2017 / 18:10
source