I need to break the line

Asked

Viewed 108 times

0

Hello I have a problem that does not leave me alone, I need that when these cells of the table arrive in 4 in each row it jumps to the next one, but here’s the problem I’m pulling these cells from the database using the $data["descricao_map"]; I do not know what to do.

<?php 
include("ArquivoConexão.php");
$consulta = "SELECT * FROM materialapoio";
$con = $mysqli->query($consulta) or die($mysqli->error);
?>
<!doctype html>
<html>
<head>
    <link rel="shortcut icon" href="../IMAGENS/Favicon.png" />
    <link rel="icon" href="../IMAGENS/Favicon.png" type="../image/x-icon" />
    <meta content="IE=edge"http-equiv="X-UA-Compatible" charset="utf-8">
    <title>Kep</title>
    <link href=../CSS/Estilo_02.css rel=stylesheet>
    <script type="text/javascript" src="../JS/JS_02.js"></script>
</head>
<body class=Modelo01>
    <div class=PaginaCompleta>
        <div id=MenuTotal class="Div_Menu_Oculto PositionAb" style="width: 5%">
            <input type="checkbox" id="navicon" onclick="Aumentar('MenuTotal') & Diminuir('Conteudo') & Aparecer('Menu') & Aparecer('Logo')"/>
            <div class="nav-toggle">
                <label for="navicon" class="menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
            </div>
            <img id=Logo class="PositionRe LogoCompleto"src=../IMAGENS/LogoTCC.png style="display: none">
            <div id=Menu class="PositionAb BotoesMenu" style="display: none">
                <input type=button class="BotaoMenu PositionRe FonteArial" value="MATERIAL DE APOIO" onclick="MaterialDeApoio()">
                <input type=button class="BotaoMenu BotaoMenu2 PositionRe FonteArial" value="CALENDÁRIO" onclick="Home()">
                <input type=button class="BotaoMenu BotaoMenu3 PositionRe FonteArial" value="LISTA DE TAREFAS" onclick="ListaDeTarefa()">
            </div>
        </div>
        <div class="Div_Conteudo  Con_Maior PositionAb" id=Conteudo style="width: 95%">
            <div class="Div_Cabeçalho PositionRe">
                <div class="PositionRe BotoesCabeçalho BT_Menor">
                    <input type=button class="PositionRe IconesCabeçalho iconeHome" onclick="Home()">
                    <input type=button class="PositionRe IconesCabeçalho Home" onclick="Sair()">
                </div>
            </div>
            <div class="BlocoDasListas PositionRe">
                <div class="FonteArial TituloTarefas PositionRe">Material de apoio</div>
                <div class=BlocoMaterial>
                    <table class="FonteArial FormataçãoMateriais">
                        <tr class="LinhaMaterial1">
                            <?php while($dado = $con->fetch_array()){ ?>
                                <td class="Colunas01"><?php echo $dado["descricao_map"];?></td>
                            <?php }?>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

aqui esta um exemplo do que eu estou tentando fazer

php html

  • Look if this solves https://answall.com/questions/324963/como-coloca-um-limite-de-4-imagens-por-linha/324976#324976 Vc need to structure your HTML to break this way, after vc populate with what comes from the bank and there will break correctly according to how the CSS made to receive the content

  • I’m sorry to say something a little out of the question, but... why don’t you use Bootstrap? There you already have the grid ready. It’s always 12. Then you can put col-md-3, that will fit 4.

  • It is good practice to mark a response that has met your acceptance, see https://i.stack.Imgur.com/evLUR.png and because https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

3 answers

2

Good afternoon, Using the percentage standard and not the pixel standard, because this way it will fit the browser. Try something like that:

<div id="pai" style="widht:100%">
   <div id="filho" style="widht:25%"></div>
   <div id="filho" style="widht:25%"></div>
   <div id="filho" style="widht:25%"></div>
   <div id="filho" style="widht:25%"></div>
   <div id="filho" style="widht:25%"></div>
</div>

0

Taking advantage of your code, it would work that way.

<table class="FonteArial FormataçãoMateriais">

    <?php 
        $numerocolunas = 4; 

        while($dado = $con->fetch_array()){ 

        echo "<tr class='LinhaMaterial1'>";
            for ($x = 0; $x < $numerocolunas; $x++) {
                echo "<td class='Colunas01'>".$dado["descricao_map"]."</td>";
            }
        echo "</tr>";

        }
  ?>

</table>

It’s just a detail, show how it could have been done taking into account the question code and the question itself is: preciso que quando essas células da tabela cheguem em 4 em cada linha ela pular para a próxima. In that case my answer points out how this can be done, now if the question were another existe uma forma melhor de fazer isso certainly the answer would be different. This just to leave here my outrage to the downsvote.

This situation looks like someone asking your mechanic: qual a solução para o defeito do meu fusquinha, the answer then would be, olha compra um Mercedes zero quilometro que é melhor.

0

You can use flexbox! Makes layout responsive and easy to maintain.

For example, you define an initial scope, with some div's. And from them we can define a fixed size using px or as a percentage.

The example below was done with fixed size, using px's.

From that we gave a display: flex to the div Father, and we add the property flex-wrap: wrap that will allow the div "go down alone, "as by default all items will try to stay in one line.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
 
  display: flex;
  
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

For more information on flexbox check out this guide.

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.