Question

我有一个Div，其中包含4张相同大小的图像，并排成一行。我希望它们通过留在同一行中来占据div中所有可用的空间，最左边的第一张图片和最右边的第四张图片，它们也必须等距排列。我可以通过修改每个图像的填充来完成此操作，所以我问是否有一种自动执行此操作的方法。

<div>
  <img src="imgsrc\html5.svg" id="htmLogo" class="iconPgr">
  <img src="imgsrc\java.svg" id="javaLogo" class="iconPgr">
  <img src="imgsrc\python.svg" id="pythonLogo" class="iconPgr">
  <img src="imgsrc\C++ icon.png" id="cLogo" class="iconPgr">
</div>

#htmLogo {
padding-left: 35px
padding-right: 0px

/* I repeat the same for every ID with different padding values so the imgs result equally spaced with htmLogo in the far right and cLogo in the far left */

Answer 1

您可以使用flexbox。在此处详细了解：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#my-container {
  display: flex;
  justify-content: space-between;
}

<div id="my-container">
  <img src="https://placekitten.com/50/50" />
  <img src="https://placekitten.com/50/50" />
  <img src="https://placekitten.com/50/50" />
  <img src="https://placekitten.com/50/50" />
</div>

Answer 2

如果可以使用引导程序，并且可以更改html，则可以将每个图像包装在div中，并使用引导程序的网格系统（here is a demo）。

#container{
  width: 100%; 
  border: 1px solid red;
}
.row{
  text-align: center;
}

 


<div class="container" id="container">
  <div class="row">
    <div class="col-lg-3"><img src="https://image.flaticon.com/icons/svg/23/23735.svg" width=50 height=50 /></div>
    <div class="col-lg-3"><img src="http://freevector.co/wp-content/uploads/2012/07/14675-telegram-logo1.png" width=50 height=50/></div>    
    <div class="col-lg-3"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgWDI1YcQTcTa2IoQn_yuEXtWwuLy7KbkFZ5H-2F3554d_j29nAQ" width=50 height=50/></div>
    <div class="col-lg-3"><img src="https://image.flaticon.com/icons/png/512/130/130484.png" width=50 height=50/></div>

  </div><!-- row END -->
</div>  <!-- container END -->

如何在不修改填充的情况下在div中放置img？

2 个答案: