Grabando dos métodos para lograr el diseño de alta CSS

Recientemente se han desarrollado problemas encontrados: dos elementos dentro de su partido necesita un contorno dinámico, que es la altura de unos dos div es incierto, pero es necesario un gran acuerdo

Fue considerado durante mucho tiempo, hay muchas soluciones en línea pero la mayoría son fijos altura, no en función de las necesidades reales, por lo vistazo a este registro:

1. El diseño altamente adaptable flex (recomendado)

<div style="display:flex;width: 200px;">
    <div style="flex:1;border:1px solid #AAA;word-break: break-word;">
            1111111111111111111111111111111111111111111111111
    </div>
    <div style="flex:1;border:1px solid #AAA">
        2222
    </div>
</div>

 2. Utilice el diseño de la mesa-celda de la tabla

<div style="display:table;width: 400px;">
    <div style="display:table-cell">12122</div>
    <div style="display:table-cell;word-break: break-word;">
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
</div>

 En ambos casos se ajustará dinámicamente la altura basada en el div contenido de relleno, y espero que todos ustedes ayuda

 

terminado

 

 

Publicado 47 artículos originales · ganado elogios 38 · Vistas a 60000 +

Supongo que te gusta

Origin blog.csdn.net/qq8241994/article/details/103480650
Recomendado
Clasificación