Erro no posicionamento de divs

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.

Enviando…
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

























TODO List | Inicio

<?php

require_once dirname(<strong>FILE</strong>) . ‘/includes/sessaoDeUsuario.php’;

require_once dirname(<strong>FILE</strong>) .’/dao/TarefaDAO.php’;

loginObrigatorio();

?>

<?php

$caminhoImagem = “”;

if($usuario->getFotoPerfil() != null){

$caminhoImagem = $usuario->getFotoPerfil();

}else{

$caminhoImagem = “imagens/iconSemFoto.gif”;

}

?>

<?php echo $usuario->getNome();?>

<?php echo $usuario->getEmail();?>

__________________

Nova Tarefa

Atualizar Tarefa

Atualizar Perfil

Favoritas

<?php include './includes/cardsTarefas.php';?>
            <?php include './includes/modalAddTarefa.php';?>
            <?php include './includes/modalAtualizarPerfil.php';?>
            <div id="mascara"></div>
        </body>
    </html>

2 Respostas

Topicos relacionados