CODEWITHSUNDEEP
html
jack
jack

Reputation: 121

how to display 3 images in 2 rows with captions?

How to write HTML code to display 3 images in 2 rows with captions without using any libraries?

The code below shows the website in the picture below. picture1

<div class="container">

<h2>Project 1: Image Filtering and Hybrid Images</h2>


<div style="float: right; padding: 10px">
<img src="../data/cat.bmp"  width="200px" height="100px"/>
<p style="font-size: 14px">   hybrid image.</p>
</div>

<div style="float: right; padding: 10px">
<img src="../data/cat.bmp" width="100px" height="100px"/>
<p style="font-size: 14px">   hybrid image.</p>
<img src="../data/cat.bmp" width="100px" height="100px" />
<p style="font-size: 14px">   hybrid image.</p>
</div>
</div>

But how can I modify the code above to show the outcome of the picture below?

picture2

Upvotes: 2

Views: 1521

Answers (2)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

You need to start thinking in terms of boxes. Use boxes as containers for your content. I could see the following boxes in your layout.

Boxes, boxes, boxes

You should also start adding classes rather than using inline CSS, because classes are easier to read and easier to maintain if you want to do any changes.

How to insert css: https://www.w3schools.com/css/css_howto.asp

Flex (CSS3): https://www.w3schools.com/cssref/css3_pr_flex.asp

.image-container {
  float: right;
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
}

.cat-container {
  flex: 1 1 50%;
  padding: 0px 1rem;
  box-sizing: border-box;
}

img.cat {
  width: 100%;
  height: auto;
}

.caption {
  font-size: 14px;
  text-align: center;
}
<h2>Project 1: Image Filtering and Hybrid Images</h2>

<div class="image-container">

  <div class="cat-container">
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" />
    <p class="caption">hybrid image.</p>  
  </div>
  
  <div class="cat-container">
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" />
    <p class="caption">hybrid image.</p>  
  </div>

  <div class="cat-container">
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" />
    <p class="caption">hybrid image.</p>  
  </div>
  
</div>


<p>Bla, bla, bla, bla.</p>

<p>Bla, bla, bla, bla.</p>

<p>Yada, yada, yada.</p>

<p>Bla, bla, bla, bla.</p>

Upvotes: 1

Shaamuji
Shaamuji

Reputation: 37

Best practice is to use bootstrap that will give you possibilities for making a responsive interface, you can look up for some examples here it will not take more than a min to fix the problem you are facing.

Upvotes: 0

Related Questions