Question

为什么第二行图像的移动方式与第一行不同？

这就是标记和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;
}

我认为我可以通过使用justify-content：space-between来修复它。 http://almaweby.cz/reference.html我需要使用flexbox，但我想将它放在列中。

Answer 1

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

flexbox中的项目放置不一样

1 个答案: