Question

我是编码的新手，如果有人能帮助我将4张图像均匀分布在同一条线上，我将非常感激。

<div id="kudobuzz_badge_widget"></div>

[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]

[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]

[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]

Answer 1

有很多方法可以让这只猫皮肤光滑。一种方法是制作一个列表，然后浮动那些列表项。我将响应性留给你，即当视口变小时会发生什么。确保所有图像的大小都相同，以获得最佳外观，并且不要使用内联样式调整大小，以便您可以使用媒体查询进行响应并正确使用级联。我在每个第二个盒子上放入蓝色边框，这样你就可以看到图像水平排列了：

* {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
list-style: none;
}

ul img {
  display: block;
  width: 100%;
  }

ul li {
float: left;
  width: 25%;
}

ul li:nth-child(2n) {
border: 1px solid blue;
}

<ul>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
  <li><img src="http://placehold.it/100x100"></li>
 </ul>

如何将四幅图像均匀分布在同一条线上？

1 个答案: