I need to break the line [duplicate]

Question

I need to break the line [duplicate]

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Hello, I have a problem that does not leave me alone, I need when these table cells arrive at 4 on each line it jumps to the next one, but that's the problem I am pulling these cells from the database using the given $ ["description_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>

php html

asked by anonymous 29.08.2018 / 21:25

3 answers

Find directory name of a .bat file Convert the date format of an array with Laravel / PHP

score 2 · Answer 1

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

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

score 0 · Answer 2

You can use flexbox! It makes the layout responsive and easy to maintain.

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

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

From this we give display: flex to div parent, and we add the flex-wrap: wrap property that will allow div "to go down by itself" because, by default, all items will try to stay in one line only.

.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 .

score 0 · Answer 3

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, showing how it could have been done considering the code of the question 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 was another existe uma forma melhor de fazer isso certainly the answer would be another. This just to leave my downsvote indignation here.

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