Ways to create sidebar images in a dual-column layout

I am currently working on creating images for my sidebar that have the same width but different heights. I am trying to achieve this without any spaces between the images.

To get a better understanding of what I am trying to do, please refer to the following image:

My development stack includes Vue.js, CSS, and HTML.

.column {
  float: left;
  width: 50%;
  
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}


    .img-dtm{
        width: 100%;
        border: 1px;
        border-style: solid;
       
    } 
<!-- Sidebar -->
        <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none;top:0px;right:0;width:30%;" id="mySidebar">

            <div class="row">
                <div class="column">
            <div id="MM_P1" value="MM_P1" v-on:click="go_map"><img class="img-dtm" src="assets/images/DTM/MM_P1.png" ></div>
            <div id="MM_P2" value="MM_P2" v-on:click="go_map"><img  class="img-dtm" src="assets/images/DTM/MM_P2.png" ></div>
            <div id="MM_P3" value="MM_P3" v-on:click="go_map"><img class="img-dtm" src="assets/images/DTM/MM_P3.png" ></div>
            <div id="MM_P4" value="MM_P4" v-on:click="go_map"><img  class="img-dtm" src="assets/images/DTM/MM_P4.png" ></div>
            <div id="MM_P5" value="MM_P5" v-on:click="go_map"><img   class="img-dtm" src="assets/images/DTM/MM_P5.png" ></div>

                </div>
                <div class="column">
             <div id="MM_P6" value="MM_P6" v-on:click="go_map"><img class="img-dtm" src="assets/images/DTM/MM_P6.png" ></div>
             <div id="MM_P7" value="MM_P7" v-on:click="go_map"><img   class="img-dtm" src="assets/images/DTM/MM_P7.png" ></div>
             <div id="MM_P8" value="MM_P8" v-on:click="go_map"><img  class="img-dtm" src="assets/images/DTM/MM_P8.png" ></div>
             <div id="MM_P9" value="MM_P9" v-on:click="go_map"><img   class="img-dtm" src="assets/images/DTM/MM_P9.png" ></div>

                </div>
                
                </div>
            
        
        </div>


        <!-- Page Content -->
        <div class="w3-teal">
            <button id="sidebar-btn" class="w3-button w3-teal w3-xlarge w3-right" style="position: fixed;top:50%;right:0;" v-on:click="open_close_sidebar"><</button>
        </div>

I have attempted to address the issue of space with the images, but have not been successful so far.

htmlcssvue.js

Answer №1

give this code a shot:

function generateRandomImgSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = generateRandomImgSize(200, 400);
  var height =  generateRandomImgSize(200, 400);
  allImages += '<img src="https://placekitten.com/'+width+'/'+height+'" alt="adorable kitty">';
}

$('#photos').append(allImages);
#test { 
  float:left;
  width: 60%;
  text-align: center;
}
#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

body {
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="test">Lorem Ipsum</div>
  <div id="photos"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

The script returned from the live server via a post request is functioning flawlessly on the local server

When using vue.js to make a post request in order to add a user to the Laravel API, I am encountering an issue where the response includes the script: document.cookie = "humans_21909=1"; document.location.reload(true), along with a 409 conflict error. Th ...

laravelvue.js

Automatic Clicks in the Chrome Console

I've come across a website that requires me to click on multiple elements scattered throughout the page Here is the code for one of the elements: <span class="icon icon-arrow-2"></span> Is there a way to provide me with the console comm ...

javascriptjqueryhtmlcssgoogle-chrome

What is the most effective way to incorporate the Google Analytics script into a Django project?

Is it recommended to add the Google Analytics script directly in <script> tag and push it to GitHub, or should it be kept secret by adding it to the .env file and called in? When I attempted the second method, it appeared in the source page as is an ...

htmldjangogoogle-analytics

What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes. .date { width: 20%; height: 15%; background-color: black; z-index: 1; position: absolute; top: 45%; ...

htmlcssbootstrap-4

Vue SPA authentication

After following various guides on implementing authentication in my Vue application with a .NET Core API backend, I have some questions. You can check out this guide: https://medium.com/dev-bits/a-guide-for-adding-jwt-token-based-authentication-to-your-si ...

authenticationvue.jsasp.net-corevuejs2single-page-application

Tips for adding elements to a computed property in Vue

I've been working on implementing an infinite scroll feature in a Vue3 app. While everything is functioning well, I've hit a roadblock when it comes to loading more data once the user reaches the end of the page. All profiles are initially store ...

javascriptvue.jsvuejs3vuex

Having trouble implementing font css file in Reactjs

When working with Reactjs (Nextjs), every time I try to incorporate "css" into my project, I encounter the following error on my screen: Module not found: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' How can I solve this issue? ...

javascripthtmlcssreactjsnext.js

What is the default DTD used if it is not specified in the doctype declaration?

On my webpage, the doctype is specified as: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> No DTD is explicitly set. I'm curious which DTD will be defaulted in IE? It seems that it doesn't function the same way as "http ...

html

What is the best way to navigate to a component that has been imported in Vue.js?

I have knowledge of Vue's scrollBehavior function, but I am struggling to integrate it with my existing code. On my Index page, I have sections composed of imported Vue components like this: <template> <div class="Container"> <Ab ...

javascriptvue.jsscrollcomponents

Obtain the Row ID for Updating without Redirecting

A table in PHP/MySQL has been created with an edit button linked to each row. When the Edit button is clicked, it redirects to the same page but with the ID of the corresponding row item. This helps the PHP script retrieve the ID of the selected item. < ...

phpjqueryhtml

Issue encountered while incorporating a PHP file into Javascript code

I'm facing a particular issue where I have a PHP file that is supposed to provide me with a JSON object for display in my HTML file. Everything seems to be working fine as I am receiving an output that resembles a JSON object. Here's the PHP file ...

javascriptphpjqueryhtmlajax

Scrapy spider malfunctioning when trying to crawl the homepage

I'm currently using a scrapy scrawler I wrote to collect data from from scrapy.contrib.spiders import CrawlSpider, Rule from scrapy.contrib.linkextractors.sgml import SgmlLinkExtractor from scrapy.selector import Selector from .. import items clas ...

pythonhtmlweb-scrapingweb-crawlerscrapy

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Having trouble calling a function with data from a foreach loop while generating HTML cards and buttons from an array. The issue seems to be in the renderProducts() method. /// <reference path="coin.ts" /> /// <reference path="prod ...

javascripthtmltypescriptloopsoop

What is the reason behind the browser not reusing the authorization headers following an authenticated XMLHttpRequest?

As I work on developing a Single Page Application using Angular, I have encountered an interesting challenge. The backend system exposes REST services that require Basic authentication. Surprisingly, while obtaining index.html or any of the scripts does no ...

javascripthtmlangularjsbasic-authenticationsingle-page-application

Angular4: The Process of Iterating Through an Array of Objects within an Object

I'm struggling to iterate through an Object that contains an array of objects within an anchor tag. Here's how my code is structured: {"1":{"uri":"test1","name":"test1","icon":"http:\/\/dummyurl\/images\/icons\/test1-ico ...

htmlangular

Internet Explorer 11 fails to interpret the attribute attr.xlink:href

I am a beginner in Angular 2 and I'm working on creating an icon component. The code I have below works perfectly in Chrome and Firefox, but unfortunately, it's not functioning in Internet Explorer 11. Here is what my component looks like: @Com ...

csshtmlsvgangular

Tips for incorporating personalized form and input directives in AngularJS while addressing issues with transcluded scope

Over the last few days, I attempted to implement something along these lines: %myform(name='somename' ng-controller='whatever') %myinput(ng-model='user.firstName' ... The controller has a user structure with firstName, l ...

javascripthtmlangularjsformshaml

The height of the parent div increases as its children grow when the browser is resized

I have a set of three divs aligned horizontally within a parent div. As the browser width changes, one of the child divs wraps under the other two when the width is reduced, transitioning them to a vertical alignment. Here are some visual examples: View i ...

htmlcssheight

The error form is not responding even after attempting to locate the issue

I have created a form and it was working fine, but now when I click on the submit or reset buttons, nothing happens. I've checked my code thoroughly line by line, but can't seem to find the issue. I even tried restoring previous versions, but no ...

htmlangular