2017-02-20 4 views
-1

Warum wird die zweite Bildreihe anders als die erste verschoben?Platzierung der Artikel in flexbox ist nicht gleich

Dies ist, wie Markup und CSS aussehen wie

<div class="hook"> 
     <div><img class="nahledy" src="fotky/masaze-iren.jpg"></div> 
     <div class="popis" style="display: none;"> 
     <h3 class="zrus H3Left">Web pro masáže</h3> 
     <a class="OdkazReference" href="http://www.masaze-iren.cz" target="_blanc">www.masaze-iren.cz</a> 
     <p><b>Zadání práce:</b><br>Nový web nahradil původní web zákazníka, který byl již velice zastaralý. Cílem bylo vytvořit přehledný web s nabídkou služeb, dobře dohledatelný přes Google a Seznam. Respozivní design pro zobrazení na mobilních telefonech. Redakční systém pro editaci údajů zákazníkem.<br>Webdesign- typizovaná šablona + dodatečná úprava některých prvků kódováním.</p> 
     <img class="referenceIMG" src="fotky/nikdo.png"> 
     <p class="referenceTXT">„Nové stránky jsou krásné a nedají se srovnávat s těmi starými. Díky nim a dobrému dohledání na Seznamu jsem získala již po 14 dnech objednávku, která mi zaplatila podstatnou část investice do webu.“</p> 
     </div> 
</div> 

.hook { 
    width: 30%; 
    margin-right: 10px; 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

Ich dachte, dass ich es durch die Verwendung rechtfertigen-Inhalt zu beheben: Raum dazwischen. http://almaweby.cz/reference.html Ich brauche flexbox, aber ich möchte es in Spalten haben.

+0

Sie bitte Ihre Frage bearbeiten schließen ein [MCVE], die Ihr Problem stellt, anstatt uns erwarten um in Ihrem Quellcode zu verwurzeln. – Shaggy

+0

Normalerweise benutzen Leute 'flexbox', weil sie sich dafür entscheiden, nicht weil sie es brauchen. Warum brauchst du es? Versteh mich nicht falsch, ich bin dafür und empfehle es sehr, aber deine Formulierung ist etwas ungewöhnlich. Bitte geben Sie ein Beispiel für Ihren Code an. Wir können Bilder nicht überprüfen, daher können wir nicht sagen, welcher Code fehlt, es sei denn, wir haben die Möglichkeit, ihn zu betrachten. –

+0

Wenn externe Links sterben, werden Fragen nutzlos, also poste stattdessen ein minimales Code-Snippet und ich werde eine Antwort posten, die es behebt (das Problem wurde bereits im Link gefunden) – LGSon

Antwort

0

Es ist die margin-right: 10px und width: 30%, dass die zweite Leitung verursachen, anders zu verhalten, so ändern Sie Ihre hook Regel auf diese

.hook { 
    width: 33%;     /* changed from 30% */ 
    /* margin-right: 10px;   removed   */ 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 
+0

Danke, es funktioniert – pandik70

Verwandte Themen