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

Having trouble getting two divs to align on the same line using the 'inline' method

I am struggling to align multiple buttons within divs on the same line. Two of these buttons should only be displayed when a specific value is greater than 0. I attempted using display:inline-block in a container div, along with style="float:right", but it ...

htmlcss

CSS loop to centrally align divs

I am facing an issue where I want to center the divs in a panel. Each div is generated within a for-each-loop inside the panel. However, the problem arises when they are displayed as block elements: When I try floating them left, they end up looking like ...

htmlcssprimefaces

Different methods for adjusting the bot's background hue

Currently, I have my Luis bot integrated into a SharePoint website using the iframe HTML element. I am looking to add some custom styling to it, specifically changing its background color. I found a tutorial that explains I need to clone the source code a ...

css.netazurebotframework

"Learn how to specifically extract parent <li> elements without including the child <li> elements

When attempting to crawl a website [URL: https://www.khaasfood.com/shop/], my first task is to retrieve the categories with their hierarchy. The .container element contains a list of li tags representing parent categories. Each parent category may also h ...

pythonhtmlcssscrapy

What is preventing my image from moving upwards?

I've been struggling to move this image up, despite trying several methods. I really want it to be aligned horizontally with the PV picture. I need the HP image to be moved directly upwards so that it aligns horizontally with the PV image. This is t ...

htmlimagecss

Is it possible to utilize a hyphen in the link_to attribute?

I'm encountering a dilemma in my Rails app where I need to assign a value to a custom data-* attribute for an anchor tag. The issue is that hashes can't contain hyphens, leading to difficulties with this code: <%= link_to 'Example', ...

ruby-on-railshashhtmlanchor

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

Is it recommended to add the identical library to multiple iFrames?

Here's a quick question I have. So, my JSP page has 4 different iFrames and I've included JQuery UI libraries in it: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://c ...

javascriptjqueryhtmljspiframe

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

javascriptjqueryhtmlajaxjsp

Using CSS3 to clear floats without altering the HTML structure

Despite searching for multiple solutions to this issue, I have yet to find one that works without requiring me to modify my HTML code. Here is the current HTML in question: <div class="name">Daiel</div> <div class="amount">30€</div ...

htmlcss

IE z-index bug affecting Youtube videos

I've been experimenting with the YouTube API and I've included the following code snippet in http://jsfiddle.net/aaronk85/wapFR/. <div id="video-wrap2"></div> <div id="video-wrap"> <div id="play-video"></div> &l ...

jquerycssiframeyoutube-apiz-index

The size of table cells automatically adjusts when zooming in the browser

While trying to display my table in Chrome, I noticed that the cell sizes of the table change when zooming in. Additionally, the table is rendered incorrectly in other browsers like IE and Firefox. I attempted adjusting the sizes to percentage values but i ...

csshtmlgoogle-chromefirefox

"Is it possible to move the text on the canvas by dragging it to where you want it to be

Seeking help again after an unsuccessful attempt. How can I allow the user to add text to the canvas by dragging it to their desired location? For example, if they input text somewhere, it should appear on the canvas and then be draggable to any position ...

javascripthtmlcanvas

What is preventing these elements from being contained within particular divs?

I'm facing an issue with my HTML code and need some help unraveling what's happening. On my simple website, I have a container div, header div, and body div, but it seems like the HTML elements are not aligning properly within these divs (they a ...

htmlcss

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

htmlcssflexbox

Unsupported MIME format

I'm encountering an issue where my stylesheet is not applying to my handlebars. It was working fine yesterday, but today I'm seeing a MIME error and I'm unsure of the reason behind it. Any assistance would be greatly appreciated. Server Cod ...

cssnode.jsexpress

Implementing jQuery form.js to dynamically update image src upon success

I am currently utilizing jquery.form.js to submit a form via AJAX and retrieve a response. My PHP page is configured to output the image URL in the format "images/thumbs/071112130957.jpg" Below is my jQuery code: $("#imageform").ajaxForm( { target: &ap ...

phpjqueryhtmlajaxform

Determining the quantity of items within a div using jQuery

Similar Question: Retrieve the count of elements inside parent div using jQuery Can you determine the total number of elements within a specific div? <div id=count"> <span></span> <span></span> <span></ ...

javascriptjqueryhtml

HTML drop-down menu malfunctioning/missing from view

I am encountering an issue where the drop-down menu is visible, but when I try to make it disappear and then hover over it again to bring it back, it does not reappear. Here is the CSS code I am using: * { margin: 0; padding: 0; } body { back ...

htmlcss

Jquery onchange event fails to fire

$('#selectclassid').trigger("change"); $('#selectclassid').on('change', function() { }); When trying to manually trigger the onchange event, it does not seem to be firing as expected. Although this format is commonly seen ...

javascriptjqueryhtml