CODEWITHSUNDEEP
htmlcss
Anuj
Anuj

Reputation: 178

Space between Image CSS

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>


As you can see, I have separated the img class for each picture and set their position : relative and right to desire value.
But its seems like long and hard way, becasue I have about 12 picture.
I want to perfectly align with the DIV columncontents with 4 X 4 (4 image top and 4 image bottom)
Image should be perfectly align with the container. Is there anyother way to
achieve this feat?

Upvotes: 0

Views: 73

Answers (3)

Gerard
Gerard

Reputation: 15786

You can use a flexbox for this. By nature, flexbox is also responsive.

UPDATE: margin added for extra space

* {
  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>

Upvotes: 1

Chaska
Chaska

Reputation: 3205

Is this what you want to do? But make sure all of your images are having same dimension.

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

Upvotes: 0

ram12393
ram12393

Reputation: 1258

the best way do this 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

Hope it solves your problem !!

Upvotes: 0

Related Questions