0

tengo una duda estoy haciendo un apartado de preguntas frecuentes para una pagina de venta de componente electronicos. tengo el problema de que en este apartado muestro las preguntas frecuentes con sus respuestas extraidas de una base de datos en mysql, le di un formato mediante div, para que en el encabezado se vea diferente que es el que muestra la pregunta y debajo la respuesta. estoy haciendo que la pagina sea responsive, y el problema es que el tamaño de los divs se ajustan al tamaño del texto, pero se ve feo porque hay otros divs que tienen una altura mayor porque contienen mas textos que otros y quiero que todos los divs esten del mismo alto. dejo el codigo que estoy usando

body
{
    font-family:Tahoma; 
}
.palabrapreguntas
{
    color: #1d71b8;
    font-size: 1.2vw;
    margin-top: 5%;
    margin-left: 9%;
}
.whats img
{
    height: auto;
    width: 20%; 
}
.whats label
{
    color: black;
    font-size: 1vw;
    cursor: hand;
}
.whats
{
    height: auto;
    width: 20%;
    margin-left: 9%;
    margin-top: 2%;
}
.preguntas
{
    border:1px solid;
    height: auto;
    width: 20%;
    float: left;
    margin-left: 10%;
    margin-top: 2%; 
    border-radius: 10px;
}
.pregu
{
    background: #A3A3A3;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    height: auto;
    width: 100%;
}
.pregu label
{
    font-size: 1vw;
}
.respuestas p
{
    font-size: 1vw;
}
.repuestas
{
    height: auto;
    width: 100%;
}
<?php
    include 'header.php';
?>
<body>
    <link rel="stylesheet" href="/neko/ccs/preguntas.css">
    <label class="palabrapreguntas">PREGUNTAS FRECUENTES</label>    
        <center>
            <?php
                include 'conexion.php';
                $consu1="SELECT * from masfrecuentes";
                $resu1=mysqli_query($enlace,$consu1);
                while($mostrar1=mysqli_fetch_array($resu1)){
            ?>
                <div class="preguntas" id="preguntas" >
                    <div class="pregu">
                        <label><?php echo $mostrar1['pregunta'];?></label>
                    </div>
                    <div class="respuestas">
                        <p><?php echo $mostrar1['respuesta'];?></p>
                    </div>
                </div>  
            <?php
                }
                $enlace->close();
            ?>
        </center>   
<?php
    include 'footer.php';
?>
</body>

1 respuesta 1

0

podrías darle un valor definido al height y centrar dentro el contenido. Con:

max-height: 300px;

Quedando de esta manera:

 .pregun{
    background: #A3A3A3;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    height: 300px;
    max-height: 300px;
    width: 100%;
}

De esta forma obligaras que el div mantenga ese tamaño sin importar su contenido, por otro lado, si la pregunta es larga puedes solo mostrar cierta parte de ella, por ejemplo: ¿Sabías que puedes ayudar al colaborador con...

Con el siguiente código

div {
      width: 230px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
}

O si deseas puedes dejar un scroll interno en cada div donde está contenida la pregunta, usando

    overflow: auto;
    overflow-y: auto;
    overflow-x: auto;

De esta forma el usuario podrá ver todo el contenido deslizando hacia abajo o al lado, sin que se desborde o agrande el div. Elige el eje que necesites. Recuerda que al asignarle el auto al overflow el scroll sera visible solo si el contenido supera a el ancho o altura maxima definido.

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.