Unusual images emerge following certain elements in this unique gallery

Looking for some advice on my image gallery created using an ordered list. The issue I'm facing is that the images are not all the same size, causing the 4th and 7th images to disrupt the layout.

I have come up with a solution by using:


        #wrapper li:nth-child(5n)
        {
            clear: left;
        }

        #wrapper li:nth-child(7n)
        {
            clear: left;
        }

However, this approach will become cumbersome to maintain as more images are added to the gallery. Is there a better way to ensure that the images display without disrupting the flow of elements? Any suggestions would be greatly appreciated. Thank you!

htmlcss

Answer №1

Arrange the li elements based on position, not the images inside them...

#container ul li {
    float: left;
    display: inline-block;
      width: 50%;
}

You can then select and clear the left floats for odd li items...

#container ul li:nth-child(odd) {
    clear: left;
}

See Updated Fiddle

If you have more than two images per row, adjustments will be needed for the nth-child selector. (Learn more here)

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

What is the best way to align these two divs centrally within a container set to display as inline-block?

I can't seem to get these two floated left divs centered within a container that has a height set to auto and a display of inline-block. The container has a max-width of 1600px, but when the window is stretched wider than that, it stays aligned to the ...

htmlcss

Adding a background image in javascript using data from a MySQL database

My current tech stack includes CodeIgniter, vanilla JavaScript, AJAX, CSS, and MySQL. I am trying to figure out how to set the background of an image that is stored in a MySQL database. While the following code is error-free and working perfectly, my cha ...

javascriptphpcssajaxcodeigniter

Change the body selector in CssResource to apply custom styles

I have implemented a CssResource within a ClientBundle following the guidelines provided in the documentation at this link. To access the styles from my UiBinder xml, I have used ui:with as explained in the documentation available at this guide. While th ...

cssgwt

Is there a way to adjust the color of the checkbox?

After creating a show/hide toggle checkbox for a password input, I ran into an issue with changing the background color when it is checked. Our current code base includes a custom styled checkbox, but it lacks the ng-model needed for this particular featur ...

htmlcssinputcheckboxstyles

Tips for switching images in a grid using jQuery

I have implemented an image grid using flexbox on a website I am developing. The grid consists of 8 boxes, and my goal is to randomly select one box every 2 seconds and assign it one of 12 random images. My strategy involves creating an array containing UR ...

javascriptjqueryhtml

Why does Socket.IO seem to be registering two clients instead of just one when there is only one connection

When using my app, the user first lands on the home screen where they can select their username. They then proceed to another page and from there, navigate to the room entry page. The issue I'm facing is with a specific section of my code that update ...

javascripthtmlnode.jsexpresssocket.io

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

javascriptjquerycss

Why does the video cover extend past its lower boundary in HTML?

I'm facing an issue where a purple cover over the <video> element extends slightly beyond the video's bottom border. Here's the code I'm using: .media-cover { display: inline-block; position: relative; } .media-cover:after ...

htmlcsshtml5-video

Display the changing value at the beginning of the drop-down menu

I'm currently working on an AngularJS forEach loop where I need to display a dropdown list with dynamic values. The goal is to have the value stored in $scope.showCurrentProgram as the first selected element in the dropdown list when the page loads, a ...

javascripthtmlangularjs

Creating an image in jpg format from an html file using a button

I have a unique HTML code for an email signature from my company and I am looking to add a button that can generate a JPG or PNG image of the signature without having to resort to PrintScreen and manual cropping in editing tools like Paint or Photoshop. Ho ...

html

I am struggling to link my JS application with a PHP file as it is showing "PHP file not found

I am facing an issue with my JS application. I am unable to send data from jQuery to a PHP file, as I encountered this error message: POST https://magazyn.rob-tech.pl/savesettings.php 404 The app is running on PORT=8080 npm run start and the package.json ...

javascriptphphtmljquerynpm

Is there a way to circumvent the mouse up event?

I want to create a feature where when a user clicks down, something specific occurs. The sequence of events includes: An action taking place (which is not the focus here). Triggering a mouse up event. Implemented with: angular, html, css. Excludes: jQue ...

javascriptcssangularjshtmlmouseevent

Having trouble understanding why adding raw HTML is yielding different results compared to generating HTML using jQuery

I need assistance with two jsFiddles: http://jsfiddle.net/kRyhw/3/ http://jsfiddle.net/kBMSa/1/ In the first jsFiddle, there is code that adds HTML to my ul element, including an 'X' icon in SVG format. Attempting to recreate this functionali ...

javascriptjquerycss

Adjust the content within an HTML div by utilizing AngularJS

Snippet of AngularJs code to display different content based on selection: <select> <option value="0">--Select--</option> <option value="1">Individual</option> <option value="2"> ...

htmlangularjs

Can someone guide me on how to create scrolling effects for my content? [html/css]

insert image description here Image dedicated to MrXQ I require assistance in verifying the accuracy of the following code - all content displayed below has been altered from the original for privacy concerns My objective is to have the headers scroll o ...

htmlcss

Retrieving an HTML string in an Ajax request

When I make an ajax call to retrieve an HTML string, the response includes the complete HTML of the current page instead of just the HTML I am generating in the web method. Here is my code: $.ajax({ type: "GET", url: ' ...

jqueryhtmlasp.netajax

Using AJAX to submit a single form

Within my HTML view, I have multiple forms that are displayed using a PHP foreach loop. One of the form examples is as follows: <form method="POST" class="like-form-js"> <input type="hidden" name="post_id" value="<?= $post['i ...

javascriptphpjqueryhtmlajax

Ways to turn off .removeClass()

Encountering an issue with jquery-2.1.4.js. Upon integrating a layerslider into my website, the script modified div classes. Attempted using older versions of the script without success. Currently have classes as follows: <a href="#" class="col-md-3 ...

jqueryhtmlcssremoveclass

Creating responsive CSS layouts for various device sizes

My webpage features a form with a prompt for the input box, followed by the input box itself. I want to implement two different layouts based on the device accessing the page. For cell phones, I want everything stacked vertically. However, for computers, ...

htmlcssmedia-queries

How can we identify if the user is utilizing a text-input control?

Incorporating keyboard shortcuts into my HTML + GWT application is a goal of mine, but I am hesitant about triggering actions when users are typing in a text area or utilizing the keyboard for select menu operations. I am curious if there exists a method ...

javascripthtmlgwtfocus