Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal, tenho um codigo aqui em php que montei, funciona da seguinte forma, bem simples eu vou adicionando box "produto" e ele vai colocando um a baixo do outro, só que eu quero que ele apareça um do lado do outro e que quando desse 3 em uma linha, quebrasse para a próxima, mais não estou dando conta de fazer isso segue o código;
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #f00
}
a:active {
text-decoration: none;
}
#caixa{
width:350px;
height:450px;
padding:8px;
background-color:#fff;
border-radius: 10px;
border-color:#000000;
border-color: #2C3E50;
border-style: solid;
border-bottom-width: 5px;
border-top-width: 5px;
border-right-width: 1px;
border-left-width: 1px;
}
#caixa:hover{
width:350px;
height:450px;
padding:8px;
background-color:#fff;
border-radius: 10px;
border-color:#000000;
box-shadow:0 1px 10px #A6A6A6;
border-color: #2C3E50;
border-style: solid;
border-bottom-width: 5px;
border-top-width: 5px;
border-right-width: 1px;
border-left-width: 1px;
}
#texto-superior{
text-align: center;
font-size: 11px;
color:#D5D5D5;
}
#titulo-webinar{
text-align: center;
color:#2C3E50;
}
#topicos{
text-align: left;
color:#7C7C7C;
padding: 2px 0px 0px 20px;
}
#botao{
text-transform: uppercase;
width:350px;
height:35px;
padding: 8px 0px 0px 0px;
background-color:#DF4000;
border-radius: 10px;
text-align: center;
box-shadow:0 1px 10px #A6A6A6;
color:#7C7C7C;
position: absolute;
color:#FFF;
font-size: 20px;
}
#divisoria{
padding: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<?php
include("./configuracao/conn.php");
error_reporting(E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
$sql = "SELECT * FROM webinardados WHERE categoria = 'Data prevista'";
$resultado = mysql_query($sql);
?>
<?php while ($webinar = mysql_fetch_assoc($resultado)) { ?>
<div id="caixa">
<div id="texto-superior">
<p> PALESTRA ONLINE </p>
</div>
<div id="titulo-webinar">
<h3><?php echo $webinar['titulo']; ?></h3>
</div>
<div id="divisoria">
<hr width=300 size=1 color=#D5D5D5 noshade>
</div>
<div id="topicos">
<p><i class="fa fa-calendar" aria-hidden="true"></i> <?php echo $webinar['datawb']; ?></p>
<p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico1']; ?></p>
<p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico2']; ?></p>
<p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico3']; ?></p>
</div><br><br><br><br>
<a href="<?php echo $webinar['linkbtn']; ?>" id="botao" target="blank" title="<?php echo $webinar['titulo']; ?>">
<?php echo $webinar['textobtn']; ?>
</a>
</div><br>
<?php } ?>
</body>
</html>
E um código simples, funciona perfeitamente, quando eu adiciono novos produtos, ele e adicionado certinho só que o problema e que ele esta indo para baixo, e eu quero que ele fique lado ao lado e quando der 3 em uma linha ele quebre e comece a ser adicionado a baixo em ordem que os mais recente fiquem na primeira linha, só que não dei conta de fazer esse procedimento rs.Meu amigo a maneira que for melhor para arrumar isso e a mais rápido pra min tanto faz rsrs', testei aqui da forma que você alterou mais não deu certo, ficou tudo misturado na tela.
Rsrs... o problema deve ter sido alguma tag. É o seguinte mantem o CDN como está deve estar relacionado com a lógica do while ou do for. Vou te colocar o código aqui como seria com o bootstrap para deixar 3 colunas somente o html e você adapta ao seu código verificando o fechamento das tags pois é aí que deve estar o problema:
<div class='container'>
<div class='row'>
<div class='col-md-4'>
"Aqui é a primeira linha primeira coluna'
</div>
<div class='col-md-4'>
"Aqui é a primeira linha segunda coluna'
</div>
<div class='col-md-4'>
"Aqui é a primeira linha terceira coluna'
</div>
</div>
<div class='row'>
<div class='col-md-4'>
"Aqui é a segunda linha primeira coluna'
</div>
<div class='col-md-4'>
"Aqui é a segunda linha segunda coluna'
</div>
<div class='col-md-4'>
"Aqui é a segunda linha terceira coluna'
</div>
</div>
</div>
Com o exemplo acima adaptado ao seu código a cada 3 col-md-4 você abre outra div 'row'. Olhando o código que modifiquei no seu original na em div clas="container" faltou a aspas de fechamento, esse erro provavelmente pode ser isso ou alguma tag html colocada em lugar errado, mas essa é a lógica.
Boa sorte.>
5 minutos atrás, Sibilio disse:
Rsrs... o problema deve ter sido alguma tag. É o seguinte mantem o CDN como está deve estar relacionado com a lógica do while ou do for. Vou te colocar o código aqui como seria com o bootstrap para deixar 3 colunas somente o html e você adapta ao seu código verificando o fechamento das tags pois é aí que deve estar o problema:
<div class='container'>
<div class='row'>
<div class='col-md-4'>
"Aqui é a primeira linha primeira coluna'
</div>
<div class='col-md-4'>
"Aqui é a primeira linha segunda coluna'
</div>
<div class='col-md-4'>
"Aqui é a primeira linha terceira coluna'
</div>
</div>
<div class='row'>
<div class='col-md-4'>
"Aqui é a segunda linha primeira coluna'
</div>
<div class='col-md-4'>
"Aqui é a segunda linha segunda coluna'
</div>
<div class='col-md-4'>
"Aqui é a segunda linha terceira coluna'
</div>
</div>
</div>
Com o exemplo acima adaptado ao seu código a cada 3 col-md-4 você abre outra div 'row'. Olhando o código que modifiquei no seu original na em div clas="container" faltou a aspas de fechamento, esse erro provavelmente pode ser isso ou alguma tag html colocada em lugar errado, mas essa é a lógica.
Boa sorte.
Ok, vou tentar aqui obrigado.
Olá Bruno, bom dia!
O problema está no css na minha opinião o mais fácil seria utilizar um framework como bootstrap (que tem muito material na internet).
Com o bootstrap seria mais ou menos assim: