Items lassen sich nicht nebeneinander anordnen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Runshak

Neues Mitglied
7 April 2020
16
0
1
30
hallo,

vor einiger Zeit habe ich hier nen Post gemacht wo ich Kacheln nebeneinander anordnen wollte. Das wollte ich jetzt mit einer Form und deren Items wieder machen. Doch dort werden die Items nur untereinander angezeigt.

Code:
while ($row=mysqli_fetch_array($query))
{
    ?>
    <div style="max-width: 1250px;
               margin: 0 auto;
               background: #003F98;
               font-size: 24px;
               padding: 25px;
               margin-bottom: 15px;
               height: auto;
               display: flex;
               flex-wrap: wrap;
               justify-content: center;">
    <form  method="post" action="Warehouse.php?action=add&id=<?php echo $row["id"]; ?>">
            <div  style="max-width: 10em;
                         height: auto;
                         box-shadow: 5px 5px 15px #000;
                         position: relative;
                         display: block;
                         overflow: hidden;
                         padding: 20px;
                         text-align: center;
                         margin: 10px 10px;
                         background: #003F98;" >
                <img style="width: 100%;" src="<?php echo $row["ImagePath"]; ?>" /><br />

                <h4><?php echo $row["PName"]; ?></h4>
                <h4><?php echo $row["PNummer"]; ?></h4>

                <h4> <?php echo $row["PPreis"]; ?> RMB</h4>

                <input type="text" name="quantity" value="1" />

                <input type="hidden" name="hidden_name" value="<?php echo $row["PName"]; ?>" />

                <input type="hidden" name="hidden_price" value="<?php echo $row["PPreis"]; ?>" />

                <input type="submit" name="add_to_cart" style="box-shadow: 0 2px 4px 0 #191919, 0 4px 10px 0 #191919;
                                                               background-color: #003F98;
                                                               color: #EC6B0D;
                                                               font-weight: bold;
                                                               font-size: 16px;
                                                               padding: 14px 10px;
                                                               margin: 8px 0;
                                                               border: none;
                                                               cursor: pointer;
                                                               width: 100%;
                                                               display: inline-block;
                                                               pointer-events: auto;
                                                               transition: none;" value="Add to Cart" />

            </div>
    </form>
    </div>
    <?php
}
Kann mir jemand auf die Spruenge helfen?

In meinem Code werden Items aus einer Datenbank dargestellt. Alles wird aus der Datenbank geholt und erhaelt dann ein Kachelfeld, in welchem die Infos dargestellt werden. Diese werden leider nur untereinander aufgelistet anstelle von nebeneinander.

Gruesse Runshak
 

Runshak

Neues Mitglied
7 April 2020
16
0
1
30
Hi, danke für deine Antwort,

entweder habe ich etwas übersehen oder ich muss noch etwas anderes hinzufügen, damit es funktioniert.

PHP:
while ($row=mysqli_fetch_array($query))
{
    ?>
    <div style="
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-items: center;
                justify-content: center;
               ">
    <form  method="post" action="Warehouse.php?action=add&id=<?php echo $row["id"]; ?>">
            <div  style=" background: #003F98;" >
                <img style="width: 100%;" src="<?php echo $row["ImagePath"]; ?>" /><br />

                <h4><?php echo $row["PName"]; ?></h4>
                <h4><?php echo $row["PNummer"]; ?></h4>

                <h4> <?php echo $row["PPreis"]; ?> RMB</h4>

                <input type="text" name="quantity" value="1" />

                <input type="hidden" name="hidden_name" value="<?php echo $row["PName"]; ?>" />

                <input type="hidden" name="hidden_price" value="<?php echo $row["PPreis"]; ?>" />

                <input type="submit" name="add_to_cart" style="box-shadow: 0 2px 4px 0 #191919, 0 4px 10px 0 #191919;
                                                               background-color: #003F98;" value="Add to Cart" />

            </div>
    </form>
    </div>
    <?php
}
Die Flex sachen im ersten div Element haben quasi nur die Auswirkung, wenn ich das justify-content auf left, center oder so stelle. Dann sind meine Items demnach sortiert, allerdings weiterhin über/untereinander und nicht nebeneinander. Da ich die Items in der While-Schleife aufliste liegt es vermutlich daran oder?

Oder hab ich beim verwenden der Flexbox was falsch gemacht?

Grüße Runshak
 

Sailor

Aktives Mitglied
14 Juli 2017
489
63
28
Du definierst das äußere 'div' als Flex-Container, dieses 'div' hat aber nur ein einziges Flex-Item... nämlich das 'form'.
Alles was du an Flex-Eigenschaften für das 'div' vorgibst, wirkt sich also nur auf das Form-Element aus... nicht auf dessen Inhalt.
Versuchen mal, deine Flex-Formate auf das 'div' im Form-Element anzuwenden.
 

Runshak

Neues Mitglied
7 April 2020
16
0
1
30
Naja, ich habe nicht nur eine Form sondern quasi unendlich viele. Je nachdem wie viele Items in der Datenbank stehen. Zur Zeit sind es drei Items. Sprich am Ende habe ich 3 Forms auf dem Bildschirm
 

Sailor

Aktives Mitglied
14 Juli 2017
489
63
28
Dann teste doch mal, was passiert, wenn du deinen Formelementen eine Breite vorgibst... zB width: 25%;
 

Runshak

Neues Mitglied
7 April 2020
16
0
1
30
PHP:
while ($row=mysqli_fetch_array($query))
{
    ?>
    <div style="max-width: 300px;
                width: 300px;
                background: #003F98;
                font-size: 24px;
                padding: 25px;
                margin-bottom: 15px;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-items: center;
                justify-content: center;">
    <form  method="post" action="Warehouse.php?action=add&id=<?php echo $row["id"]; ?>">
            <div  style="max-width: 350px;
                         height: auto;
                         box-shadow: 5px 5px 15px #000;
                         position: relative;
                         overflow: hidden;
                         padding: 20px;
                         text-align: center;
                         margin: 10px 10px;
                         background: #003F98;" >
                <img style="width: 100%;" src="<?php echo $row["ImagePath"]; ?>" /><br />

                <h4><?php echo $row["PName"]; ?></h4>
                <h4><?php echo $row["PNummer"]; ?></h4>

                <h4> <?php echo $row["PPreis"]; ?> RMB</h4>

                <input type="text" name="quantity" value="1" />

                <input type="hidden" name="hidden_name" value="<?php echo $row["PName"]; ?>" />

                <input type="hidden" name="hidden_price" value="<?php echo $row["PPreis"]; ?>" />

                <input type="submit" name="add_to_cart" style="box-shadow: 0 2px 4px 0 #191919, 0 4px 10px 0 #191919;
                                                               background-color: #003F98;
                                                               color: #EC6B0D;
                                                               font-weight: bold;
                                                               font-size: 16px;
                                                               padding: 14px 10px;
                                                               margin: 8px 0;
                                                               border: none;
                                                               cursor: pointer;
                                                               width: 100%;
                                                               display: inline-block;
                                                               pointer-events: auto;
                                                               transition: none;" value="Add to Cart" />

            </div>
    </form>
    </div>
    <?php
}

Egal was ich da so eintrage, bekomme ich meine Items nicht nebeneinander...
 

Runshak

Neues Mitglied
7 April 2020
16
0
1
30
Entweder steh ich gerade dermaßen auf dem Schlauch oder etwas anderes ist nicht passend, denn egal wie ich width oder max-width verteile, setze oder sonst was bleibt die anordnung meiner Items gleich und nicht wie gewünscht nebeneinander
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.545
225
63
Definier erst mal was für dich in deinen Quelltext überhaupt ein Item ist. Um dir zu helfen müssen wir erst mal einen einheitlichen Sprachgebrauch finden.
 

Runshak

Neues Mitglied
7 April 2020
16
0
1
30
die While Schleife holt die Informationen aus der Datenbank. Diese Informationen werden jeweils in einer Form Dargestellt. Jeder Datenbankeintrag bekommt eine eigene Form. Jede dieser Forms habe ich bisher als "Item" bezeichnet, da es quasi eine Einheit, gefuellt mit den Infos aus der Datenbank, ist.

Die angehaengten Bilder sollen das ganze nochmal zeigen.

Nebeinander ist das wo ich hin will und Uebereinander ist das wo ich bin
 

Anhänge

MrMurphy

Senior HTML'ler
28 Juli 2009
1.545
225
63
Nächste Frage: Was sind für dich Forms? Das form-Element in HTML? Oder etwas anderes? Dein Quelltext passt nicht zu deinen Angaben, wie sie üblicherweise in HTML und CSS verwendet werden.

Ich kenne mich mit php nur sehr eingeschränkt aus. Deshalb zum Verständnis, wie ich das Problem sehe:

Du hast eine Datenbank mit aktuell drei Einträgen. Die werden mittels einer Programmschleife in einen HTML-Quelltext übernommen.

Meiner Kenntnis nach werden bei einem Durchlauf einer Schleife jeweils alle Einträge innerhalb der Schleife übernommen, bei dir also:

Code:
<div>
   <form action="">
      <div>
         <img src="">
         <h4></h4>
         <h4></h4>
         <h4></h4>
         <input type="text">
         <input type="hidden">
         <input type="hidden">
      </div>
   </form>
</div>
Bei dreimaligen Durchlauf würde das Ergebnis also folgendermaßen aussehen:

Code:
<div>
   <form action="">
      <div>
         <img src="">
         <h4></h4>
         <h4></h4>
         <h4></h4>
         <input type="text">
         <input type="hidden">
         <input type="hidden">
      </div>
   </form>
</div>
<div>
   <form action="">
      <div>
         <img src="">
         <h4></h4>
         <h4></h4>
         <h4></h4>
         <input type="text">
         <input type="hidden">
         <input type="hidden">
      </div>
   </form>
</div>
<div>
   <form action="">
      <div>
         <img src="">
         <h4></h4>
         <h4></h4>
         <h4></h4>
         <input type="text">
         <input type="hidden">
         <input type="hidden">
      </div>
   </form>
</div>
Um die drei Ergebnisse der Schleifendurchläufe nebeneinander zu bekommen müsstest du demnach dem übergeordneten Element (welches wir nicht kennen) die Flex-Eigenschaft zuweisen.

Oder du müsstest deine Schleife (stark vereinfacht) ändern zu

Code:
<div>
   while {
      <form action="">
         <div>
            <img src="" alt="">
            <h4></h4>
            <h4></h4>
            <h4></h4>
            <input type="text">
            <input type="hidden">
            <input type="hidden">
         </div>
      </form>
   }
</div>
also innerhalb des äußeren div einfügen.
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
489
63
28
Mach mal folgendes:
PHP:
    <div style="max-width: 300px;
                width: 300px;
                background: #003F98;
                font-size: 24px;
                padding: 25px;
                margin-bottom: 15px;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-items: center;
                justify-content: center;">
    <?php
    while ($row=mysqli_fetch_array($query))
{
    ?>       
    <form  method="post" action="Warehouse.php?action=add&id=<?php echo $row["id"]; ?>">
            <div  style="max-width: 350px;
                         height: auto;
                         box-shadow: 5px 5px 15px #000;
                         position: relative;
                         overflow: hidden;
                         padding: 20px;
                         text-align: center;
                         margin: 10px 10px;
                         background: #003F98;" >
                <img style="width: 100%;" src="<?php echo $row["ImagePath"]; ?>" /><br />

                <h4><?php echo $row["PName"]; ?></h4>
                <h4><?php echo $row["PNummer"]; ?></h4>

                <h4> <?php echo $row["PPreis"]; ?> RMB</h4>

                <input type="text" name="quantity" value="1" />

                <input type="hidden" name="hidden_name" value="<?php echo $row["PName"]; ?>" />

                <input type="hidden" name="hidden_price" value="<?php echo $row["PPreis"]; ?>" />

                <input type="submit" name="add_to_cart" style="box-shadow: 0 2px 4px 0 #191919, 0 4px 10px 0 #191919;
                                                               background-color: #003F98;
                                                               color: #EC6B0D;
                                                               font-weight: bold;
                                                               font-size: 16px;
                                                               padding: 14px 10px;
                                                               margin: 8px 0;
                                                               border: none;
                                                               cursor: pointer;
                                                               width: 100%;
                                                               display: inline-block;
                                                               pointer-events: auto;
                                                               transition: none;" value="Add to Cart" />

            </div>
    </form>
    <?php
    }
    ?>
    </div>
So sollten mit dem Loop nur die Flex-Items (Formelemente) in den äußerem Flex-Container eingefügt werden.
 
  • Love
Reaktionen: Runshak