Erro no posicionamento de divs

Front-end
#1

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.

print_aplicação
print_aplicação.jpg1366×768 256 KB

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(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”;
}
?>







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

Matheus usa o flex-box ele vai tea ajudar muito nisso !!!

1 curtida
#3

@Matheus_Emanuel Vc vai ter que fazer um Layout Css, pra agrupar cada coluna.
Veja esse exemplo: https://www.w3schools.com/css/css_rwd_grid.asp

1 curtida