Aligning images in columns

I need help aligning a set of images using CSS. Currently, they are stacked top to bottom and I want them to be placed left to right instead.

In simpler terms:

1|2|3|4

5|6|7|8

vs

1|3|5|7

2|4|6|8

#photos {
   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 {
  width: 100% !important;
  height: auto !important;
}

This information is sourced from the tutorial at: http://css-tricks.com/seamless-responsive-photo-grid/

jqueryhtmlcss

Answer №1

To achieve your goal, the approach you take depends on what you are aiming for. If HTML5 is non-negotiable for you, keep in mind that it may not be fully supported across all browsers and versions. However, if you simply want to create a seamless row of images stacked together, consider the following code snippet.

  <style type="text/css">
        #photos {
            float:left;
            width:800px;
        }
        .imageItem{
            float:left;
        }
    </style>
</head>
<body>
        <div id="photos">
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm8.staticflickr.com/7136/7733019900_c671c8d393_m.jpg" />
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
        <img class="imageItem" src="http://farm9.staticflickr.com/8426/7733031344_0762136432_m.jpg"/>
    </div>
</body>

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

Troubleshooting issue: Unable to send file data using jQuery AJAX request

I'm having trouble sending data with a file using jQuery ajax. The code snippet I'm using is as follows: <script> function uploadImage() { var form = document.getElementById("table").value + "-form"; alert(form); ...

jqueryajax

Jquery's remove function fails to function correctly when used on a cloned element

I am facing an issue where I have a list of rows that need to be deleted. However, when I attempted to use jQuery's remove function, it only removed the original row and not its clone. My goal is for the parent element of the parent to be removed when ...

javascriptphpjqueryhtml

Adding descriptive text before a website link is a helpful way to provide context for the reader. For example

My goal is not just to have JavaScript change the URL after my page has loaded. I want to be able to enter something like 'blog.mywebsite.com' into the omnibar and have it locate my website similar to how Steam does with 'store.steampowered. ...

javascriptphphtml.htaccessweb

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

javascripthtmlcssangular

"Utilize jQuery to implement toggling, pagination, and handling multiple

I am new to jquery and I need help figuring out the best approach to achieve what I want. It seems like it involves using a combination of jquery functions: When the list of items exceeds 5, a 'more' link should appear. Clicking on this link ...

jquerytogglepagination

Collapsed Bootstrap 5 select drop-down featuring the multiple attribute

I am facing a challenge with using the select element along with the 'multiple' attribute. My aim is to have it collapsed by default and expand only when the user clicks on it. Unfortunately, Bootstrap 5 no longer supports the multiselect feature ...

jquerycssbootstrap-5bootstrap-selectbootstrap-selectpicker

Guide on sending a JSON object in an Ajax call within a Django environment

My objective is to send a dictionary as a Json in an Ajax request using the code snippet below: Views.py from rest_framework.response import Response class ChartData8(APIView): def tickets_per_day_results(request): if request.method == "POST ...

jqueryjsonajaxdjangopython-3.x

Delivering styled coldfusion outcomes utilising css and jquery

After using jquery to retrieve some data, I've noticed that the results are displayed correctly but the CSS is not being applied. Is there a way to style the results with CSS? function doSearch() { //Making an AJAX call to the server $.ajax({ / ...

jquerycsscoldfusion

Inject HTML entities, escaped for CSS, dynamically using JavaScript

My goal is to dynamically generate a list of HTMLElements with unique data-* attributes that correspond to various HTML Entities. These attributes will then be utilized by CSS to display content in pseudo elements like this: li:after { content: attr(dat ...

javascripthtmlcssfontsescaping

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

javascriptphphtml

Tips for creating responsive text within a hero image

I'm exploring the world of creating responsive websites using Bootstrap, a new venture for me. One challenge I've encountered is trying to create a hero image with text positioned perfectly in the center. Despite my efforts, the text does not adj ...

htmlcssresponsive-designbootstrap-5

A quirky bug with Tumblr's JS/Jquery Infinite Scroll and Masonry feature

As someone new to JS/JQuery and masonry, I seem to be facing a puzzling issue with overlapping posts/divs. Despite my extensive search for answers, I have run out of ideas. The problem arises from the content at this link: Below is the complete theme cod ...

javascriptjquerytumblrjquery-masonryinfinite-scroll

The hovering effect on the image link is causing the surrounding div to stretch too far

Whenever I hover over specific points below an image link wrapped in a div, it triggers the hovering effect for the CSS-created image link. Despite trying various solutions like overflow:hidden and display:inline-block, nothing seems to resolve this issue. ...

javascripthtmlcssweb-frontend

Is there an efficient method for matching "data-" attributes with property names in mixed case?

In my custom jQuery plugins, I utilize a base plugin class that goes beyond what the jQuery UI widget offers by handling more complex tasks. Currently, I am looking to extract values from data- attributes attached to elements and incorporate them as optio ...

javascriptjqueryjquery-pluginscustom-data-attribute

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

javascriptjqueryhtmlcssskrollr

React-Tooltip trimming

Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn&a ...

javascriptcssreactjsmaterial-ui

Tips for adjusting the width of a table

add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...

htmlcss

Which web browser(s) can properly display the CSS property display: run-in?

Compatibility with IE7 and FF2.0 Suitable for IE8 and Opera 9+ Works only on IE7 Optimized for IE8 and FF3.5 Supports IE7 and Safari This question came up in a quiz, but I don't have all the browsers to test it. Any assistance would be greatly apprec ...

css

Ways to expand media queries using sass

I have been using media queries to modify my code. @media (min-width: 576px) .modal-dialog { max-width: 500px; margin: 14% auto; } I want to change the media query, but after searching online, I couldn't find a suitable solution. I know the foll ...

csssassbootstrap-4media-queriesbootstrap-modal

Ways to showcase a standalone identifier from iTunes RSS

I have a script below that fetches iTunes charts directly from the RSS and displays it. However, I am looking to only display the information for a specific ID from the RSS entry. Any suggestions on how this can be achieved? <script> jQuery(functi ...

javascriptphpjqueryajax