概述了许多微小图像各种尺寸(第一张图像合二为一,二合一,其余所有其余三张图片每行布局)所有作品都在FireFox中精美排序:整洁布局三行跨度中间的第二张图像。
但后来我在Chrome和MS Edge中对它进行了测试,结果却发现布局到处都是(见图片)。基本代码为JSFIDDLE Demo。
logo3 :nth-child(2) img{margin: 0 auto}
logo3 :last-child img{float: right}
答案 0 :(得分:-2)
我已经使用Chrome 59.0.3071.115,Firefox 54.0.1和Edge 40.15063.0.0对此进行了测试。他们看起来很相似。
编辑:logo1 a, logo2 a, logo3 a { flex: 1; }
已添加。
body {
width: 300px
}
logo1,
logo2,
logo3 {
display: flex;
flex-direction: row;
align-items: center;
}
logo1 a,
logo2 a,
logo3 a {
flex: 1;
}
logo1 img,
logo2 img,
logo3 img {
width: 100%;
display: block;
outline: 1px solid #000;
}
logo1 img {
width: 100%;
margin: 10px 0
}
logo2 img {
width: 95%;
margin: 10px 0
}
logo2 :last-child img {
float: right
}
logo3 img {
width: 90%;
margin: 10px 0
}
logo3 :nth-child(2) img {
margin: 0 auto
}
logo3 :last-child img {
float: right
}

<logo1>
<a href="#"><img src="https://hubspotleiden.nl/media/uploads/partners/gemeente-leiden.png" /></a>
</logo1>
<logo2>
<a href="#"><img src="https://www.aanmelder.nl/resources/img/references/Universiteit%20Leiden.png" /></a>
<a href="#"><img src="https://hartlongcentrum.nl/themes/hartlongcentrum/images/lumc_logo.png" /></a>
</logo2>
<logo3>
<a href="#"><img src="http://www.begrotingzuidholland.nl/assets/img/logo.png" /></a>
<a href="#"><img src="https://www.fryslan.frl/templates/images/flex-v9/logo.png" /></a>
<a href="#"><img src="https://www.fryslan.frl/plaat.php?fileid=13276&f=d84cea4401ac79c2f1fee09119068905413ea0bf339c69a0477f2f531c96c7e6fdbcff8b99f4eb9b4d3b491af4ea91fe2fa0cc18fbcf450f49de23164166e7f5" /></a>
</logo3>
<logo3>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/2000px-IBM_logo.svg.png" /></a>
<a href="#"><img src="http://www.magnus.nl/wp-content/uploads/2012/10/Sandd.png" /></a>
<a href="#"><img src="https://static.thuisbezorgd.nl/images/restaurants/nl/3OQ3P/logo_465x320.png" /></a>
</logo3>
<logo3>
<a href="#"><img src="http://www.kringloopwarenhuis.nl/images/Piezo_logo.png" /></a>
<a href="#"><img src="https://static.thuisbezorgd.nl/images/restaurants/nl/30R5151/logo_465x320.png" /></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/LIFF_zonder_datum.png" /></a>
</logo3>
<logo3>
<a href="#"><img src="http://www.clcvecta.nl/content/user/1/images/voorstellen-homepage/Logo%20RAI%20Amsterdam.png" /></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/LG_logo_%282015%29.svg/800px-LG_logo_%282015%29.svg.png" /></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Christen_Democratisch_App%C3%A8l_%28nl%29_Logo.svg/1024px-Christen_Democratisch_App%C3%A8l_%28nl%29_Logo.svg.png" /></a>
</logo3>
&#13;