0

Olá, estou fazendo uma aplicação e estou querendo criar cards utilizando html e css, eu já consegui criar os cards, mas não estou coseguindo posicionar um ao lado do outro, alguém sabe como posso fazer isso?

O layout está ficando assim, mas eu quero que quando acabar o espaço o próximo cartão desça. inserir a descrição da imagem aqui CSS dos cartões:

@font-face{
    font-family: 'IndieFlower';
    src: url("../fontes/IndieFlower.ttf");
}

*{
    padding: 0;
    margin: 0;
    border: 0;
}

.w3-card-4{
    width: 400px;
    float: right;
    top: 10px;
    left: 330px;
    position: absolute;
    background-color: #FFFFFF;
}

header{
    background-color: #FF6861;
    color: #FFFFFF;
}

footer{
    background-color: #FFFFFF;
    border-top: 1px solid #FF6861;
    height: 55px;
    text-align: right;
}

.w3-container p{
    font-family: 'IndieFlower';
}

.acoes{
    border: none;
    display: inline-block;
}

Código do cartões

<?php 
    require_once dirname(__FILE__) . '/../classes/Tarefa.php';

    $tarefas = TarefaDAO::listarTarefas($usuario->getId());
    if($tarefas != null):
        foreach ($tarefas as $tarefa):
?>
<div class="w3-card-4">
    <header class="w3-container">
        <h1><?php echo $tarefa->getNome();?></h1>
    </header>
    <div class="w3-container">
        <p>
            <?php echo $tarefa->getDescricao();?>
        </p>
    </div>   
    <footer>
        <form>
            <input class="acoes" type="image" src="imagens/favoritar.png"/>
            <input class="acoes" type="image" src="imagens/lixeira.png"/>
            <input class="acoes" type="image" src="imagens/atualizar.png"/>
        </form>
    </footer>
    <?php endforeach;?>
    <?php endif?>
</div>

Código da tela principal

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/inicio.css"/>
        <link rel="stylesheet" href="css/modal.css"/>
        <link rel="stylesheet" href="css/w3.css"/>
        <link rel="stylesheet" href="css/cards.css"/>
        <script src='js/jquery-3.2.1.min.js' type='text/javascript'></script>
        <script src='js/modal.js' type='text/javascript'></script>
        <script src='js/background.js' type='text/javascript'></script>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="shortcut icon" href="imagens/todoIcone.ico"/>
        <title>TODO List | Inicio</title>
        <?php
            require_once dirname(__FILE__) . '/includes/sessaoDeUsuario.php';
            require_once dirname(__FILE__) .'/dao/TarefaDAO.php';
           loginObrigatorio();
        ?>
        <?php
            $caminhoImagem = "";
            if($usuario->getFotoPerfil() != null){
                $caminhoImagem = $usuario->getFotoPerfil();
            }else{
                $caminhoImagem = "imagens/iconSemFoto.gif";
            }
        ?>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <img id="fotoUsuario" src="<?php echo $caminhoImagem;?>"/>
                    <p class="informacoes"><?php echo $usuario->getNome();?></p>
                    <p class="informacoes"><?php echo $usuario->getEmail();?></p>
                </li>
                <li>
                    <p>_____________________________</p>
                </li>
                <li>
                    <a href="#addTarefa" rel="modal">Nova Tarefa</a>
                </li>
                <li>
                    <a href="">Atualizar Tarefa</a>
                </li>
                <li>
                    <a href="#atualizarPerfil" rel="modal">Atualizar Perfil</a>
                </li>
                <li>
                    <a href="">Favoritas</a>
                </li>
                <!--WARNING: Gambiarra abaixo--> 
                <li>
                    <p>___________</p>
                </li>
                <li>
                    <a href="funcoes/logoutUsuario.php"><img src="imagens/logout.png"/></a>
                </li>
            </ul>
        </nav>
        <div id="fundo">
            <img src="imagens/fundo_principal.jpg "/>
        </div>

        <?php include './includes/cardsTarefas.php';?>
        <?php include './includes/modalAddTarefa.php';?>
        <?php include './includes/modalAtualizarPerfil.php';?>
        <div id="mascara"></div>
    </body>
</html>
1
  • Com position absolute vc não vai conseguir fazer isso.
    – Sam
    20/01/2018 às 22:07

2 Respostas 2

0

FLOAT e OVERFLOW

1º - A classe .w3-card-4 sugiro que seja um < LI >

ul li.w3-card-4 { ... }

2º - Não utilize float: right, a menos que seja extremamente necessário. E remova o position: absolute

ul li.w3-card-4 { float: left; position: relative }

3º - Coloque um overflow:hidden no < UL > para que não haja transbordamento.

ul { overflow: hidden; }

2
  • Por que a classe .w3-card-4 deve ser um <li>?
    – Sam
    20/01/2018 às 23:46
  • Realmente não deve, mas acredito ser a melhor prática para estes casos. 20/01/2018 às 23:55
0

Evite utilizar a propriedade position nos elementos, a não ser que realmente precise. Coloque os cards dentro de uma div pai para alinhar apenas esse elemento de acordo com a estrutura de sua página. Nos cards, utilize margin para tratar do espaçamento entre seus elementos e adicione display: inline-block para que eles fiquem um ao lado do outro. Abaixo tem um exemplo resumido de como ficaria.

.w3-card-4{
    width: 180px;
    display: inline-block;
    background-color: #FFFFFF;
    margin: 10px;
}

header{
    background-color: #FF6861;
    color: #FFFFFF;
}
<div class="container-cards">
    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 1</h1>
        </header>
    </div>

    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 2</h1>
        </header> 
    </div>

    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 3</h1>
        </header> 
    </div>

    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 4</h1>
        </header>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .