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

Flexbox

gd0123456

Mitglied
hab ein flexbox. in der flexbox sind zwei divs die eben nebeneinander sein sollen, und sich erst dann verschieben wenn kein platz mehr ist.

nur bekomm ich das mit dem Code nicht so hin bzw. weiß ich nicht wo der fehler ist.

PHP:
<div id = 'portfoliosmartphone1'> <!-- Layout für Portfoliosmartphone -->
  <?php
         if (array_key_exists('1',$portfoliotext_array))
          {
              echo "<div id = 'bild1smartphone' >";
                    echo  htmlspecialchars_decode($portfoliobild_array[1]); --> Ein Bild wird ausgelesen
              echo "</div>";
              echo "<div id = 'bild2smartphone'>";
                       echo  htmlspecialchars_decode($portfoliobild_array[1]);
               echo "</div>";   
            }
    ?>
</div>

Code:
CSS:

#portfoliosmartphone1 {
overflow: auto;
margin-left: 5%;
margin-top: 2%;
display: flexbox;
}

div.portfoliosmartphone1 bild1smartphone {
z-index: 1;
width: 30%;
background-color: #E6E6E6;
border-radius: 20px;
  overflow: hidden;
}


div.portfoliosmartphone1 bild2smartphone {
z-index: 1;
width: 30%;
background-color: #E6E6E6;
border-radius: 20px;
  overflow: hidden;
}

Was mache ich falsch?
 
Zuletzt bearbeitet:
Gut den Fehler hab ich auch bemerkt. Aber was is dann noch falsch?
Hab es vorher mit Bildern gemacht, wenn es ich vom platz nicht ausgeht verschiebt er das Bild einfach eine Reihe runter, dazu definierte ich nur ein div mit Display: Flex.
 
Das ist mit an Sicherheit grenzender Wahrscheinlichkeit auch falsch.
Code:
div.portfoliosmartphone1 bild1smartphone

Warum baust du das Markup nicht erstmal statisch und prüfst es mit den Dev Tools deines Browsers?
 
kann es leider nur am Handy prüfen, weiß nicht wie ich es dort mittels dev Tools kontrollieren soll.
hab es jetzt aufh #bild1smartphone geändert, jedoch bleiben die zwei untereinander.
 
Simuliere das Handy doch mit Entwicklertools am Desktop-Browser. Geht beim Firefox und Chrome auch ohne zusätzliches Addon.
 
über JavaScript schalte ich das div mit Display: block ein. Und inline hat Vorrang und somit übernimmt er Display: Flex aus der css Datei nicht.
 
Zurück
Oben