gpt4 book ai didi

html - 如何控制父 div 中子 div 的换行位置?

转载 作者:行者123 更新时间:2023-11-28 15:18:44 30 4
gpt4 key购买 nike

全屏运行下面的代码片段并调整屏幕大小以查看最后一行中的图像如何堆叠/环绕。它们直接包裹在下一行的正中央。我希望它们向左环绕。

#instafeed{
text-align: center;
}

#instafeed a {
display: inline;
}
<div id="instafeed">
<a href="https://www.instagram.com/p/BXnys9RjRPz/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/20688297_1963514993937753_857460435048202240_n.jpg"></a>
<a href="https://www.instagram.com/p/BWxTrtyDxRc/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.29.629.629/20213856_1910698219205963_6930800772938465280_n.jpg"></a>
<a href="https://www.instagram.com/p/BWNScFZjAgh/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c119.0.841.841/19761754_1559014790783970_446056229412798464_n.jpg"></a>
<a href="https://www.instagram.com/p/BHUleLojUFQ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13556807_1737478323176649_1504794082_n.jpg"></a>
<a href="https://www.instagram.com/p/BGuK4Fcj8b1/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13391183_147579948992940_1044739645_n.jpg"></a>
<a href="https://www.instagram.com/p/BFCIh_Oj8YZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13117875_1540501896252889_1217427591_n.jpg"></a>
<a href="https://www.instagram.com/p/BEfKRBvj8Qd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12960149_1093357414043915_1709258515_n.jpg"></a>
<a href="https://www.instagram.com/p/BD4AKj0D8Qk/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12912710_1541744086121735_865068036_n.jpg"></a>
<a href="https://www.instagram.com/p/BDdgvkqj8eB/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12905230_1339824306033837_360303890_n.jpg"></a>
<a href="https://www.instagram.com/p/BDWgGqED8V_/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/11931255_1744543129098475_1731252403_n.jpg"></a>
<a href="https://www.instagram.com/p/BDUiP0ZD8eE/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12277558_561257480701059_1294228914_n.jpg"></a>
<a href="https://www.instagram.com/p/BDRJGqgj8be/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12816783_205447836492901_702305080_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYvhOj8dx/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12822483_1128921290474375_1930798468_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYno8j8dm/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.75.766.766/12797898_1144014128964808_1934723307_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYhs6j8dZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12751172_1698911350393552_1669259430_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYcOpD8dP/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/10631982_1516921725284348_987033499_n.jpg"></a>
<a href="https://www.instagram.com/p/BCl2NgfD8fS/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12783854_1718490315031227_197281851_n.jpg"></a>
<a href="https://www.instagram.com/p/BCl2GKBD8fF/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12530847_1697788697165860_206292143_n.jpg"></a>
<a href="https://www.instagram.com/p/BCWZ8Ykj8cH/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.117.937.937/12748280_174729976240065_1868201851_n.jpg"></a>
<a href="https://www.instagram.com/p/1GTMoAD8bd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e15/11116793_1623276567903955_143681467_n.jpg"></a>
</div>

最佳答案

目前,据我所知,唯一的非“hack”方法是使用 CSS-Grid

#instafeed {
background: pink;
display: grid;
grid-template-columns: repeat(auto-fill, 160px);
grid-auto-rows: 160px;
grid-gap: 4px;
justify-content: center;
}
<div id="instafeed">
<a href="https://www.instagram.com/p/BXnys9RjRPz/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/20688297_1963514993937753_857460435048202240_n.jpg"></a>
<a href="https://www.instagram.com/p/BWxTrtyDxRc/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.29.629.629/20213856_1910698219205963_6930800772938465280_n.jpg"></a>
<a href="https://www.instagram.com/p/BWNScFZjAgh/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c119.0.841.841/19761754_1559014790783970_446056229412798464_n.jpg"></a>
<a href="https://www.instagram.com/p/BHUleLojUFQ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13556807_1737478323176649_1504794082_n.jpg"></a>
<a href="https://www.instagram.com/p/BGuK4Fcj8b1/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13391183_147579948992940_1044739645_n.jpg"></a>
<a href="https://www.instagram.com/p/BFCIh_Oj8YZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13117875_1540501896252889_1217427591_n.jpg"></a>
<a href="https://www.instagram.com/p/BEfKRBvj8Qd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12960149_1093357414043915_1709258515_n.jpg"></a>
<a href="https://www.instagram.com/p/BD4AKj0D8Qk/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12912710_1541744086121735_865068036_n.jpg"></a>
<a href="https://www.instagram.com/p/BDdgvkqj8eB/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12905230_1339824306033837_360303890_n.jpg"></a>
<a href="https://www.instagram.com/p/BDWgGqED8V_/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/11931255_1744543129098475_1731252403_n.jpg"></a>
<a href="https://www.instagram.com/p/BDUiP0ZD8eE/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12277558_561257480701059_1294228914_n.jpg"></a>
<a href="https://www.instagram.com/p/BDRJGqgj8be/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12816783_205447836492901_702305080_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYvhOj8dx/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12822483_1128921290474375_1930798468_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYno8j8dm/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.75.766.766/12797898_1144014128964808_1934723307_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYhs6j8dZ/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12751172_1698911350393552_1669259430_n.jpg"></a>
<a href="https://www.instagram.com/p/BCmYcOpD8dP/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/10631982_1516921725284348_987033499_n.jpg"></a>
<a href="https://www.instagram.com/p/BCl2NgfD8fS/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12783854_1718490315031227_197281851_n.jpg"></a>
<a href="https://www.instagram.com/p/BCl2GKBD8fF/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12530847_1697788697165860_206292143_n.jpg"></a>
<a href="https://www.instagram.com/p/BCWZ8Ykj8cH/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c0.117.937.937/12748280_174729976240065_1868201851_n.jpg"></a>
<a href="https://www.instagram.com/p/1GTMoAD8bd/"><img src="//scontent.cdninstagram.com/t51.2885-15/s150x150/e15/11116793_1623276567903955_143681467_n.jpg"></a>
</div>

关于html - 如何控制父 div 中子 div 的换行位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46622771/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com