如何在父母内部控制子div的包装位置？

时间：2017-10-07 16:52:26

标签： html css

在全屏幕下运行我的代码段并调整屏幕大小以查看最后一行中的图像如何堆叠/换行。它们包裹在直接位于下方的下一行。我希望他们包裹在左边。

#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>

2 个答案:

答案 0 :(得分：1)

目前，唯一的非“黑客”方式，AFAIK，是用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>

答案 1 :(得分：0)

现在 很简单：text-align: left;怎么样？

#instafeed{
  text-align: left; 
}

#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>

相关问题
最新问题