CODEWITHSUNDEEP
htmlcssimageflexbox
Adasco
Adasco

Reputation: 7

IMG in GRID html css

So bassicly what I'm trying to acheive is this:

what i want

.row {
  display: -ms-flexbox;
  /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
  margin: 0% 20%;
}

.column {
  -ms-flex: 50%;
  /* IE 10 */
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 500px;
  height: 350px;
}
<div class="row">
  <div class="column">
    <img src="/images/classic.jpg">
    <img src="/images/deep.jpg">
  </div>
  <div class="column">
    <img src="/images/full.jpg">
    <img src="/images/relax.jpg">
  </div>
</div>

and here's what I'm getting. result

So, basically - I'm new to html and css (as you can tell) and I just cannot figure out what's wrong there :/.

Upvotes: 0

Views: 47

Answers (2)

Omar Zaoujal
Omar Zaoujal

Reputation: 436

CSS file

.row {
 display: -ms-flexbox; /* IE 10 */
 display: flex;
 -ms-flex-wrap: wrap; /* IE 10 */
 flex-wrap: wrap;
 padding: 0 4px;
 margin: 0% 20%;
}

.column {
 -ms-flex: 50%; /* IE 10 */
 flex: 50%;
 padding: 4px;
 text-align: center;
}

.column img {
 margin-top: 8px;
 vertical-align: middle;
 width: 100%;
 height: auto;
 border-radius: 10px;
}

you have to know the different between the usage of px and ¨% at with and hight

Upvotes: 0

Zavosh Ghorbanpour
Zavosh Ghorbanpour

Reputation: 150

if your images folder is in your current path you should put dot "." before your slash. like this

 <img src="./images/classic.jpg">
 <img src="./images/deep.jpg">

Upvotes: 1

Related Questions