how can I place images, from a search result. in columns at the bottom of the web page. as mine are currently in a row going straight down the middle?

Question

how can I place images, from a search result. in columns at the bottom of the web page. as mine are currently in a row going straight down the middle? I am using css

img { width: 30%; margin: 15px; border: 5px solid lightyellow; box-shadow: #rgba(255, 0, 0, 0.5); } — Nyisha, Nov 13 '20 at 09:51

score 0 · Answer 1 · answered Nov 13 '20 at 14:01

Strategy 1: Wrap your result into a div and set its position attribute.

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some text more or less</p>

<div class="content">
  
  <img src="https://dummyimage.com/160x120/cccccc/fff" />
  <img src="https://dummyimage.com/160x120/cccccc/fff" />
  <img src="https://dummyimage.com/160x120/cccccc/fff" />
  
</div>

How to align content at the bottom of a page: explained here

Strategy 2: Use flexbox to align items.

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

How to use flexgrid for responsive image grid: read this

how can I place images, from a search result. in columns at the bottom of the web page. as mine are currently in a row going straight down the middle?

1 Answers1