flexbox中物品的摆放位置不一样

-1

为什么第二行图像移动的方式与第一行不同？flexbox中物品的摆放位置不一样

这是标记和CSS的样子

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

如何我认为我可以通过使用证明内容修正：空间之间。 http://almaweby.cz/reference.html我需要使用flexbox，但我想在列中使用它。

来源

2017-02-20 pandik70

请编辑您的问题包括[MCVE]，说明你的问题，而不是等着我们来源于您的源代码。 – Shaggy

通常人们使用'flexbox'是因为他们选择，而不是因为他们需要。为什么你需要*使用它？不要误解我的意思，我全力以赴，高度推荐它，但你的措辞有点不寻常。请提供您的代码示例，我们无法检查图片，因此无法知道您的代码是否丢失，除非我们有机会查看它。 –

当外部链接死了，问题变得没用，所以发布一个最小代码片段，我会发布一个解决它的问题（发现问题已经在链接中） – LGSon

它是margin-right: 10px和width: 30%导致第二行的行为不同，所以改变你的hook规则，这

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

来源

2017-02-20 18:39:27 LGSon

谢谢，它的工作原理 – pandik70

flexbox中物品的摆放位置不一样

回答

相关问题