1
resposta

[Projeto] Caixas de tamanhos diferentes

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeGalera como eu deixo as caixas no mesmo tamanho mesmo com textos de tamnhos diferentes

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mercenários Cartola</title>
        <link rel="stylesheet" href="ligacartola.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1> <img src="logodaliga.jpg" alt="imagemlogo"    height="160px"    width="120px"></h1>

                <nav>
                    <ul>
                        <li><a href="classificacao.html">Classificação</a></li>
                        <li><a href="melhordarodada.html">Melhor da Rodada</a></li>
                        <li><a href="mata-mata.html">Mata-Mata</a></li>
                        <li><a href="premiacao.html">Premiação</a></li>
                        <li><a href="halldafama.html">Hall da Fama</a></li>
                        <li><a href="pitaco.html">Pitaco da Rodada</a></li>

                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <ul class="informações">
                <li>
                    <h2>Competição por Pontos Corridos</h2>
                    <img src="trofeu.jpg">
                    <p class="descrição">Competição por pontos corridos, todos contra todos, os melhores colocados no Geral, 1º e 2º turno recebem os  prêmios!</p>
                </li>

                <li>
                    <h2>Liga Mata-Mata</h2>
                    <img src="trofeu.jpg">
                    <p class="descrição">A cada 03 rodadas os 08 primeiros colocados se enfrentam em uma competição estilo mata-mata.</p>
                </li>

                <li>
                    <h2>Pitaco da Rodada</h2>
                    <img src="trofeu.jpg">
                    <p class="descrição">A cada 05 rodadas seu pitaco de resultado vale uma graninha! </p>
                </li>

                <li>
                    <h2>Campeão da Rodada</h2>
                    <img src="campeãorodada.png">
                    <p class="descrição">A cada 05 rodadas seu pitaco de resultado vale uma graninha! </p>
                </li>
            </ul>

        </main>
    </body>

</html>
header {
        padding: 20px 0;

}

.caixa {
    position: relative;
    width: 1150px;

}

nav {
    position: absolute;
    top: 50px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 10px;

}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;

}

.informações {
    width: 1050px;
    margin: 0 auto;
    padding: 50px 0;
}

.informações li {
    display: inline-block;
    text-align: center;
    width: 22%;
    vertical-align: top;
    margin: 0 1%;
    padding: 30px 10px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
    background:     #CCCCCC;

}

.informações li img {
    max-width: 180px;
    max-height: 120px;
}

.informações h2 {
    font-size:     30px;
    font-weight: bold

}

.descrição {
    font-size:     20px;
}
1 resposta

Oi Laydson, tudo bem?

Você pode definir uma height para o seu .informações li e você pode testar até a altura que achar que fica bacana, no meu coloquei uma height: 365px;.

Mas é importante você ir testando e ver o que você acha melhor até porque não tenho suas imagens.

Um abraço e bons estudos.