What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg

I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumbersome if the number of images increases, requiring rework in both the HTML and CSS. I also tried using the nth-child property, but this caused issues with responsiveness. It's crucial for the images to upload correctly from the backend.

     <ul class="box-image">
    <li>
      <div class="item">
        <img src="img/item1.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item2.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item3.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item4.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item5.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item6.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item7.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item8.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <img src="img/item9.jpg" class="img-responsive">
        <div class="hold-text">
          <h3>Al Raha Beach Villa
            Abu Dhabi 204264</h3>
        </div>
      </div>
    </li>
  </ul>
javascripthtmlcssbootstrap-4

Answer №1

To achieve this effect, you can utilize the column property in CSS3. This allows you to break up both images and text into columns. By using the column-count, you can specify how many columns you want the images to be divided into.

For a sample demonstration, you can check out my code on CodePen.

In the example, I used column-count: 3 to split the images into 3 columns.

Here is the HTML code:

<div class='container'>
  <span class='image-wrapper'>
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" />
  </span>
  ...
</div>

And here is the CSS styling:

.container {
  column-count: 3;
}

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

Tips for correctly mentioning a user while using message.channel.send in discord.js

Looking for guidance on tagging a user properly using message.channel.send in discord.js? Here's the code I'm currently working with: function replaceAll(str, find, replacer) { return str.replace(new RegExp(find, 'g'), replacer) ...

javascriptnode.jsdiscord.js

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

htmlcssprintingmedia-queries

What is the best way to choose dropdown values by utilizing various button IDs?

I have four different vacation destinations and four buttons. I want to automatically select each destination separately when the corresponding button is clicked. <select class="aa" required="" name="f1990" {input.multiple}="" {input.size}="" id="f19 ...

javascripthtml

Learn the steps to include an HTML checkbox in an AJAX HTML editor

I need help with adding an HTML checkbox to an Ajax HTML editor in ASP.NET. I have attempted to do this but am having trouble checking and unchecking it. Below is the code snippet that I have tried. Any suggestions would be greatly appreciated. webform.as ...

htmlasp.netajax

Hide the cursor when the text box is in focus

Is there a way to remove the cursor from a textbox when it is clicked on? I want the cursor to disappear after clicking on the textbox. jQuery(document).ready(function($) { $(function(){ $('#edit-field-date-value-value-datepicker-popup-0&ap ...

jqueryhtml

Eliminate any properties with values that exceed the specified number in size

:) I'm trying to create a function that removes properties with values greater than a specified number. I've searched through multiple resources like this question on how to remove properties from a JavaScript object and this one on removing pro ...

javascript

The switch/case function I implemented is functioning correctly, however, an error is being displayed in the console stating "Cannot read property 'name' of null"

Check out the live codepen demo here After selecting "elephant" from the third dropdown, the console.log(brand.name) displays "elephant" as expected and executes the rest of the switch statement successfully. However, there seems to be a console error oc ...

javascriptangularjs

Tips for setting up a scheduled event on your Discord server using Node.js

Hello fellow programmers! Recently, I've been working on a Discord bot using discordjs sdk. I'm trying to implement a feature where the bot creates an event every week. I went through the discordjs guide and checked the discord api documentati ...

javascriptnode.jsdiscord

Removing the switcher outline in Bootstrap Switch: a step-by-step guide

I have implemented the bootstrap-switch - v3.3.1, however, I want to remove the default blue outline that appears around the switcher when toggling it on or off. Despite setting style="outline: 0 none; for the input, the outline remains visible. Below is ...

javascripthtmlcssbootstrap-switch

Angular 2 encountered a fatal error: Issues with parsing the template:

Here is the code snippet I am currently working with: <div class="container"> <div [hidden]="loggedIn"> <md-grid-list cols="6" [style.margin-top]="'20px'"> <md-grid-tile [colspan]="1"></md-grid-tile> I have already ...

javascriptangular

Implementing inline styles in the HEAD section of a Next.js website

I currently have a blog hosted on Jekyll at , and I'm looking to migrate it to Next.js. My unique approach involves embedding all the styles directly into the HEAD element of each HTML page, without utilizing any external stylesheet files. However, wh ...

javascriptreactjsnext.js

Incorporate CSS animations prior to removing an element from an array

Before removing an item from my data table, I want to implement a CSS animation. The deletion is initiated by the @click event. I would like to preview the effect of my animation (class delete_animation) before proceeding with the actual removal. var vm ...

javascriptvue.js

Issue with Registration Form Redirection

This registration form has been created using a combination of HTML, PHP, and MYSQL. However, after filling out the form and submitting it, the page simply reloads. I'm unsure if there is an issue with my PHP or HTML code. I'm at a loss as to w ...

phphtmlmysql

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?

Let's discuss a scenario where we have a React component that takes a string as a prop: interface MyProps { myInput: string; } export function MyComponent({ myInput }: MyProps) { ... return ( <div> {myInput} </div> ...

javascripthtmlreactjstypescriptecmascript-6

Images Centerfold Team

I am facing a challenge in creating a group of images for an album. There seems to be a significant gap on the right side, which cannot be resolved without using padding. However, adding padding only works for my current PC resolution and creates a larger ...

htmlcsstwitter-bootstrap-3

Error message: The protocol "https:" is not compatible with this function. Please use "http:" instead

I decided to use IBM Bluemix for my school project, where I am working on creating a web service. For my project, I need to fetch JSON data from an API in order to utilize the provided information. Currently, I am utilizing the http get method to retrieve ...

javascriptjsonnode.jshttpibm-cloud

The error "clearRect is not defined in javascript" occurs when the property is being called on an undefined object in the JavaScript

I've encountered a similar question before, but unfortunately, the solution provided didn't help me! I'm relatively new to JavaScript and have been struggling with this issue for nearly a day now without success. The structure of my class a ...

javascriptcanvas

Creating and fetching CSV files using PHP and AJAX

I have successfully created a PHP script that generates a CSV file for automatic download by the browser. The code below shows a working version with sample data for different car models. <?php $cars = array( array("Volvo",22,18), array("BMW",15,1 ...

javascriptphpjqueryajaxcsv

How to conceal sections of a webpage until a child component is successfully loaded with vue

I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is be ...

javascripthtmlcssvue.js

Changing an Array into JSON format using AngularJS

I am attempting to switch from a dropdown to a multiselect dropdown. <select name="molecularMethod" class="form-control" ng-model="request.molecularMethod" multiple> It is functioning properly. However, when items are selected, it generates an arra ...

javascriptarraysangularjsjson