Arrangement using the display property of inline-block not following a linear direction

I'm experiencing some issues with the arrangement of elements on this page: When the viewport width is around 800px, the layout appears misaligned. Some lines have only a few bottles even though there is space for more. Is there a solution to this problem, possibly by utilizing bootstrap? Ideally, I would like the bottoms of the containers to be aligned. My CSS:

        .photo-link {
            max-width: 300px;
            display: inline-block;
            float: left;
            text-align: center;
            font-size: medium;
            padding: 5px;
            margin: 5px;
            border: 3px solid #663366;         
        }

My HTML:

<a href="i/360widex43high.jpg" class="photo-link fancybox" title="360widex43high">
<img src="t/360widex43high.jpg" /><br>360widex43high</a>
<a href="i/43widex360high.jpg" class="photo-link fancybox" title="43widex360high">
<img src="t/43widex360high.jpg" /><br>43widex360high</a>
htmlcss

Answer №1

Would you prefer each image to have a unique size? My suggestion is that it's simpler to fill empty spaces if all images have the same height.

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

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

phpcsssymfony

Unequal spacing between the edges of two background images

I am attempting to create two distinct "layers" of background on my webpage by encapsulating the content within a div element. Strangely, the background set for the div is being clipped before it reaches the edge of the screen, while the one designated as ...

htmlcss

CloudFront for Amazon - Limit MP3 playback to designated website

I've been trying to find a solution for allowing mp3 files in an Amazon S3 bucket paired with Cloudfront to be streamed directly on my site without revealing the source URL of the mp3s. I want to prevent others from sharing or leeching the link by vie ...

javascripthtmlamazon-s3amazon-cloudfrontmediaelement.js

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

I've created an upload form that allows users to submit images: <form> <input accept="image/jpeg, image/gif, image/png" type="file" name="image" id="image" class="UploadInput" onchange="submitImageUploaderForm()"/> </form> Once t ...

javascripthtmlajaxjquery

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

cssflexbox

Determining html column values using a related column and user input

Is there a way to populate an HTML table column (using Javascript or jQuery) based on the values in another column and an input field? For instance, if I input the number 115 into the field, then the advance column should display a value of 1 for each ath ...

javascriptjqueryhtml

The Jquery function .load() doesn't load HTML comment tags as expected

Utilizing the .load() Jquery function enables me to insert html tags from one file into another. Here is an example of the code: <html> <head> <script src="jquery.js"></script> <script> function loadConte ...

jqueryhtml

Achieve a stunning visual effect by placing images behind the background using HTML and

I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...

csshtmlimage

Create and dispatch a JSON POST request to a remote domain without direct server access

My current hurdle involves attempting a POST request in JSON to an external domain without having access to the server's files for modification. However, upon making the request, I encounter the following error: XMLHttpRequest cannot load . No & ...

jqueryhtmljsonajaxcross-domain

Concealing the path of a file input in CSS

Similar Question: How to Conceal Input File Path in HTML File Upload Hello there! I was wondering if it's feasible to conceal the input file path and only display the browse button? Thanks a lot! Lucas ...

cssinput-type-file

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

My express application successfully serves an HTML page from my disk when I initially make a GET request to "http://localhost:3000/" in the browser. Now, I am trying to access a JavaScript file that is located in the same directory on the disk as the HTML ...

javascripthtmlnode.jsexpress

Incorrect posture during the movements

Utilizing Jquery Drag and Drop, I have implemented two swap-able divs. However, during the animation process of swapping the divs, their positions are not properly maintained. The actual swapping of the divs works correctly, but there is an issue with the ...

javascriptjqueryhtmlanimationjquery-animate

CSS changes triggered by JQuery are ineffective

Having trouble modifying the CSS of a class in my HTML file. I've been struggling with this for quite some time and can't figure out what I'm doing wrong. (I've already attempted multiple versions, but nothing seems to work) Here' ...

javascriptjqueryhtmlcss

What is the best way to make a CSS class appear in my javascript using the method I have been using before?

I am facing an issue in making this code work properly. It functions correctly for my caption element as there is only one caption tag in my HTML. However, the same code does not work for my TR element since it requires a for loop to iterate through multip ...

javascriptcss

Problem encountered while generating a torus shape using webGL

I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...

javascripthtmlgraphicsopengl-eswebgl

Having trouble with the float not working for the main content below the sidebar? Stay tuned

Here is the layout I am working with: .page-wrapper { height: 100%; min-height: 970px; position: relative; } .pageheader { min-height: 50px; position: fixed; min-width: 100%; } .navbar-fixed-top { top: 0; } .page-sidebar { float: left ...

htmlcssstylesfrontend

Tips for updating the hover background color of a table row with a unique class in bootstrap

Modified: Here is the table along with its corresponding CSS styling: .table-hover tbody tr:hover { background-color: #fff !important; } <html lang="en"> <head> <meta charset="utf-8" /> <meta name="v ...

cssbootstrap-5

"Communication + AngularJS + Social Networking - The Perfect Trio

I'm currently in the process of developing an Angular app that will eventually be compiled using PhoneGap for both Android and iOS platforms. While testing various plugins to incorporate Facebook integration (specifically for login and sharing), I enc ...

angularjshtmlfacebookcordovaphonegap-build

Problem displaying images in Mean stack app using CSS background-image and Webpack

Currently, I am enhancing my skills by working on my own projects. One of the projects I'm focused on right now is designing a MEAN-stack app that utilizes Webpack. In the past, I encountered an issue where I couldn't display images in my app. Ho ...

htmlcssangularwebpacksass

Tools for generating Xpath or CSS selectors on Firefox and Chrome browsers

Struggling with finding helpful plugins for my Selenium webdriver development. Firebug for FF and Selenium IDE are not working for me. Despite trying multiple plugins for both FF & Chrome, I can't find anything to generate xpath or CSS strings. Lookin ...

cssseleniumuser-interfacexpathspy