Attain three images with precise dimensions using CSS

Having trouble fitting 3 images in the same row? The issue arises when the images have different sizes, causing everything to shift. Any advice on how to address this problem? Thank you.

HTML:

           <div class="first-slot">
             <div class="masonry-box post-media">
               <img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
                 <div class="shadoweffect">
                   <div class="shadow-desc">
                    <div class="blog-meta">
                     <span class="bg-orange"><a href="category-01.php" title="">'.$row['categoria'].'</a></span>
                      <h4><a href="single.php?id='.$row['id'].'" title="">'.$row['titulo'].'</a></h4>
                     <small><a href="single.php?id='.$row['id'].'" title="">'.$row['fecha'].'</a></small>
                     <small><a href="single.php?id='.$row['id'].'" title="">'.$row['autor'].'</a></small>
                    </div>
                   </div>
                 </div>
             </div>
           </div>

CSS:

    .first-slot {
    float: left;
    width: 65%;
    height: 35%;
}

.last-slot,
.second-slot {
    float: left;
    width: 35%;
    height: 28%;
}

Bootstrap

    .img-fluid {
  max-width: 100%;
  height: auto;
}
cssbootstrap-4

Answer №1

My solution to your problem involves utilizing specific class names and CSS within your code. Make sure to adjust the image source locations based on your needs, as well as modify the margin attribute in the CSS as required. Don't forget to include the Bootstrap link in your project files.

 .imgItem{

        display: inline-block;
        margin: 10px;
    }
    .imgContainer{
        display: flex;
    }


<div class="row">
      <div class="col imgContainer" >
            <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
                </div>
           <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
           </div>
           <div class="col imgItem">
                <img src="http://placehold.it/150x100" class="img-responsive 
                " alt="Responsive image" />
           </div>
       </div>
    </div>

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

The carousel caption in Bootstrap 5 vanishes when viewing the website on a smaller device

Currently, I'm dealing with an issue using bootstrap carousel code. The carousel text displays properly on desktop screens but disappears when viewed on smaller sized screens. It appears that the text is being hidden behind the image. Various attempts ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Difficulty arises in designing a tableless layout due to the issue of auto

Wondering why my page is not expanding with its content? Check out my demo on Fiddle http://jsfiddle.net/msas3/. The light blue area should determine the overall height of the page. ...

csslayoutcss-floathtml

Increase transparency of scrollbar background

Is it possible to adjust the opacity of a scrollbar track? I attempted to use opacity:0.5, but it didn't have any effect. I am using material UI styled, although I don't believe that is causing the issue. const Root = styled('div')(({ ...

cssmaterial-ui

Expanding Div Heights that Adjust to the Browser's Width

Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/ The issue lies in the bottom 2 divs - aiming for a grey bar the wi ...

htmlcssresponsive-design

Stop mega menu items from disappearing when hovered over

I'm currently working on a web page that features a mega menu. When I hover over the mega menu, it displays its items. However, when I try to hover over the items, they disappear. Here is the HTML code snippet: <li class="dropdown mega-dropdown m ...

javascriptjqueryhtmlcssbootstrap-4

Utilizing CSS3 Pseudo Elements for Styling a Graph

I'm struggling to achieve the desired look of my ancestor chart using an unordered list format. Initially, I borrowed code from CSS3 Family Tree, but found it to be more like an organizational chart rather than a family tree. For testing purposes, he ...

htmlcsspseudo-element

What could be causing the partial transparency in my SVG mask?

I have been working on an interesting SVG code that creates a rectangle with a cutout circle. However, I am facing an issue where the non-cutout part appears to be partially transparent. https://i.sstatic.net/1PLHL.gif Can anyone provide me with guidance ...

htmlcsssvg

I'm having trouble with my scroll bar in a React project using JavaScript. Can anyone spot what might be causing the issue?

Attempting to create a React site for the first time, so please forgive any novice mistakes or oversights on my part. Currently, my navigation bar is fixed at the top of the page with basic hover animations. I am aiming for it to disappear when scrolling d ...

javascripthtmlcssreactjsjsx

What is the method for incorporating a link in an accordion header next to the toggle button with Bootstrap?

I'm attempting to enhance a link in the accordion-button so that only the arrow is clickable for collapsing. The CSS I added below makes the arrow clickable, but I am having trouble getting the link in the accordian-button to work. I want users to be ...

csstwitter-bootstrapbootstrap-5bootstrap-accordion

Utilizing an Image as a Link in the Background

I am working on a way to convert the CSS background image I have into a clickable link that can be referenced. Here is my CSS code: #wrapper { height: 100%; padding: 66px; } #ad_11 { background-image: url(images/index1.png); display: block; text-indent: ...

htmlcss

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...

javascriptjqueryhtmlcss

Executing a Javascript function post AJAX page loading

I'm not a coding expert, so I hope my question is still clear. Essentially, I have an index.php page with filters (by project, year, month) that send variables to filterData.php after clicking submit. These variables are then used in SQL statements t ...

phpjavascriptcssajaxsiblings

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

javascripthtmlcss

Should the value exceed the designated width of the combobox, it should be displayed across multiple lines

Having an issue where, when I set the width of the combobox and the value inside it is longer than expected, the full value isn't displayed. I am considering displaying the value on multiple lines to ensure the entire content is visible. Unfortunatel ...

htmlcss

Loading images in advance before webpage loads

Welcome friends! This is my first time asking a question here, so I hope I'm doing it right :) I'm looking to preload 3 images before the webpage fully loads so that they all appear simultaneously. Currently, the images load one after another and ...

javascriptjqueryhtmlcss

Utilizing JavaScript to dynamically adjust the height of one div to match the height of another div

Struggling to adjust the height of one div to match another using the following code: var aboutheight=document.getElementById('about').offsetHeight; document.getElementById('sampledogs').setAttribute("style","height:aboutheight"); Des ...

javascriptcss

Tips for integrating a vertical menu with button icons and subcategories

Currently working on a project with Twitter Bootstrap and looking to create a specific sidebar setup. My goal is to include subcategories using an accordion and a collapsible menu for mobile devices. I came across a similar implementation at http://jsfiddl ...

jquerycsstwitter-bootstrap

Calendar toggle appearing behind modal

Hey there, I'm currently facing an issue with my view using Angular 4 and Bootstrap 4. Whenever I click on "open" to display the calendar, it's appearing behind my modal. Unfortunately, I am unable to access the class as it's auto-generated. ...

angularcalendarbootstrap-4bootstrap-modalbootstrap-datepicker

Images in CSS accordion not displaying correctly in WordPress website

It seems like I am overlooking a simple solution here, but it's escaping me. I'm attempting to make a CSS accordion function where each section links to a page. If you want to view the source refer to this link Here is my test site URL: this l ...

htmlcsswordpressimageaccordion

Ensure that icons are evenly spaced, regardless of whether they display a notification badge or not

Although not as abundant as depicted in the image below, it is more evident that I am seeking a couple of font awesome icons overlaid with a bootstrap badge to display notifications. The two issues that I am encountering are: There is excessive spacing ...

htmlbootstrap-4