Question

div#columncontents {
  background: black;
}

img.colimg03 {
  position: relative;
  right: -70px;
}

img.colimg02 {
  position: relative;
  right: -40px;
}

<div id="columncontents">
  <div class="columnimage">
    <img class="colimg01" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg02" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg03" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg04" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg05" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
    <img class="colimg06" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  </div>
</div>

如您所见，我为每张图片分离了img class并将其position : relative和right设置为期望值。
但是它似乎是漫长而艰难的路，因为我有大约12张照片。
我想与DIV columncontents完全对齐，其尺寸为4 X 4（顶部为4，底部为4）
图像应与容器完全对齐。还有其他方法
实现这一壮举？

Answer 1

您可以为此使用flexbox。本质上，flexbox也是响应式的。

更新：为多余的空间添加了边距

* {
  box-sizing: border-box;
}

#columncontents {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background-color: blue; /* For visibility only */
}

div {
  width: 23%;
  margin: 1rem 0;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

<div id="columncontents">
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g"></div>
</div>

Answer 2

做到这一点的最佳方法bootstrap grid system

.img-box{
  border:1px solid #000;
   margin-left:10px;
  margin-top:10px;
}

<div class="container">
  <div class="row">
    <div class="col-sm-4 img-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">

    </div>
    <div class="col-sm-4 img-box">
           <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">

    </div>
    <div class="col-sm-4 img-box">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">
    </div>
    <div class="col-sm-4 img-box">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">
    </div>
    <div class="col-sm-4 img-box">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">
    </div>
    <div class="col-sm-4 img-box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g" alt="">

    </div>
  </div>
</div>

Live Preview

希望它可以解决您的问题！

Answer 3

这是您想要做的吗？但是请确保所有图像都具有相同的尺寸。

.container {
  width: 100%;
  overflow: hidden;
}
.container > img {
  float: left;
  width: 25%;
}

<div class="container">
  <img class="colimg01" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  <img class="colimg02" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  <img class="colimg03" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  <img class="colimg04" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  <img class="colimg05" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  <img class="colimg06" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  <img class="colimg06" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
  <img class="colimg06" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVuJjUob_gNDIGlo71Z9zkBGpFhizBoKUOmaVcv2mWB9ANu50d1g">
</div>

图像CSS之间的空间

3 个答案: