Ensure that text is justified to the left both above and below inline elements contained within the parent div

I am attempting to align text, generated dynamically, on the left side of some images that are positioned next to each other. The image on the far left should also be aligned to the left.

.inline-attachments {
    display:inline; 
    vertical-align:top;
}
<div class="content">text top left above inline images
<div class="inline-attachments"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2duxRXndQoYlHxjCw2U6rQTOJPYvFqx6AzA&usqp=CAU" /></div>
<div class="inline-attachments"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2duxRXndQoYlHxjCw2U6rQTOJPYvFqx6AzA&usqp=CAU" /></div>
text bottom left below inline images</div>

If simply enclosing the inline div in paragraph tags is not feasible, what CSS solution can achieve this alignment?

Many thanks to Bert W for the helpful solution utilizing JS to accommodate various numbers and sizes of images (refer to his 3rd comment).

htmlcss

Answer №1

This is the final revision to my successful solution for the individual who posed the question. I have included a link to this solution on codepen in the comments below, but I wanted to provide an updated version for anyone viewing this post in the future.

const img = document.querySelectorAll('.inline-attachments');
for (let i=0; i < img.length; i++){
  let parent = document.querySelector('.content');
  if (img[i]===img[0]){
    let p = document.createElement('p');
    parent.insertBefore(p, img[i]);
  } else if (img[i]===parent.lastElementChild){
      let p = document.createElement('p');
      img[i].appendChild(p); 
  }
}
.inline-attachments {
    display:inline; 
    vertical-align:top;
}
<div class="content">text top left above inline images
<div class="inline-attachments"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2duxRXndQoYlHxjCw2U6rQTOJPYvFqx6AzA&usqp=CAU" /></div>
                    
<div class="inline-attachments"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2duxRXndQoYlHxjCw2U6rQTOJPYvFqx6AzA&usqp=CAU" /></div>   
<div class="inline-attachments"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2duxRXndQoYlHxjCw2U6rQTOJPYvFqx6AzA&usqp=CAU" /></div> 
text bottom left below inline images</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

Is there a way to remove this specific element from an inherited hyperlink?

My website can be found at whensayfeed.meteor.com. Each post on the site is enclosed within an <a></a> element. The heart symbol on the right side of each post is intended to be a "like button" that users can click on. However, because it is ...

javascripthtmlcss

What is the best way to use JavaScript to disable all duplicate textboxes with identical IDs?

I am faced with a situation where I have multiple TextBoxes with the same Id. Due to certain restrictions, I am unable to use Class for differentiation. My goal is to only enable the first TextBox and disable the others. Below is an example of my code wit ...

javascriptjqueryhtml

What is the method for implementing a distinct background in dark mode while utilizing Material UI Themes?

I am facing an issue with changing the background color when in dark mode. Here is my initial code snippet... export const myThemeOptions: ThemeOptions = { palette: { mode: "light" as PaletteMode, primary: { main: ...

cssmaterial-uithemes

Can parameters be included in the HTML class attribute?

Is it possible to embed specific information into HTML elements, like images, without disrupting valid HTML markup? Would the following example be considered valid HTML? <img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" > The idea is ...

jqueryhtmlcss

How to set textboxes as read-only depending on the drop-down choice?

After developing some scripts to automatically populate the data-length and data-width in textboxes based on a dropdown selection, I now face the challenge of making the .width and .length textboxes readonly depending on the selected dropdown option. Is t ...

javascriptjqueryhtmlcss

Animating the change of background image position in jQuery

Struggling to change the background image position in jQuery animation? Need some assistance to troubleshoot it? Here is the code you are working with: CSS #pnav a{ background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Ticket ...

jqueryhtml

The functionality of the "#Next" and "#Prev" features in the Tiny carousel are currently not functioning properly within the MVC project

Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel Added Tiny Carousel's .js and .css files to Bundles.confi ...

jquerycssasp.net-mvctwitter-bootstrapcarousel

Customizing font weights in Bootstrap 5.3 through CSS stylesheet: A step-by-step guide

My goal is to have my h1 heading styled with Montserrat font in black and font weight 900. However, when I checked my website using Google Developer Tools, I noticed that the CSS code I applied is being overridden by the Bootstrap link. Unfortunately, dele ...

htmlcssoverridingbootstrap-5

Encountering a 'Cannot Get /' Error while attempting to reach the /about pathway

I attempted to create a new route for my educational website, and it works when the route is set as '/', but when I try to link to the 'about' page, it displays an error saying 'Cannot Get /about' Here is the code from app.js ...

javascripthtmlnode.jsexpressweb-applications

The favicon appears broken upon opening a new tab

Usually, I use a favicon PNG file for my website. It works perfectly and I can see my favicon on the browser tab. However, when I open a PDF document in a new page from my Angular app, I notice that there is a broken icon on the browser tab. Here is how I ...

javascripthtmlcssangularfavicon

Using jQuery to trigger a CSS transformation with a click event

I am facing a challenge where I need to modify an already transforming element when it is clicked. However, the current code does not trigger any action upon clicking. While utilizing jquery-ui partially resolves the issue by bringing back the element to ...

jquerycss

Opera's extra space feature allows users to comfortably browse the

I'm attempting to insert a progress bar inside a td element within my table. Below is the code: <td style="width: 150px;"> <div style="height: 16px; max-height: 16px; overflow: hidden; border: 1px solid #80C622;"> < ...

csslayoutopera

Designing a structured layout with div elements resembling tables within a Bootstrap 4 card

I'm struggling with formatting this card. My goal is to create two columns, one with the class col-xs-3 and the other with the class col-xs-9. The titles in the col-xs-3 column should align with the corresponding titles in the col-xs-9 column. Unfort ...

htmlcsstwitter-bootstrapbootstrap-4

Troubleshooting: My Custom Checkbox Style Is Not Functioning

I recently customized my checkboxes using CSS, and while they are working fine in Chrome, I encountered issues with Internet Explorer and Edge. In my search for a solution, I came across this helpful reference: ref Here is the CSS code snippet that I used ...

csscheckbox

Concealing anchor and span elements using CSS in Internet Explorer 7

I decided to simplify things by creating a style within the document to address my specific issue. The problem I encountered involves a row of 4 links that are designed to resemble buttons. I have chosen to hide the Next link (the 3rd item) using CSS. Whil ...

css

Steps to align an SVG to the right within a div

I'm struggling to get an SVG to align at the end of its containing div. The div is set to display in flex and I've tried using "align-self: flex-end" on the a tag that wraps the svg, as well as experimenting with block and float-right. Any sugges ...

htmlcssbootstrap-4frontend

The compatibility of Cordova CSS properties varies across different devices

I am currently using the ionic framework to develop my upcoming app. I encountered an issue while trying to set a background SVG image for body. The background displayed perfectly on desktop browsers like Firefox and Chrome, as well as on my Nexus 4 device ...

csscordovasvgionic-framework

The conditional statement within the EventListener does not seem to be functioning as intended

I am attempting to calculate BMI and then display additional information on the calculation result when a button is clicked. The 'what does this mean' button should show information based on the calculated BMI score. const generatebutton = doc ...

javascripthtmlcss

Best practices for embedding Internal CSS and rectifying missing classes in mobile view for email templates on Gmail

I am currently facing an issue with my email template. While it works perfectly fine in Outlook web and the Outlook app, Gmail web and Gmail's internal CSS strip away certain classes automatically. In an attempt to hide the pre-header on mobile devic ...

htmlcsshtml-email

One common issue that arises is the failure of a Javascript function to execute when trying to display a div that is initially hidden using the CSS

I have a div on my website that is initially hidden using this css rule: .menu-popup{ display:none; border:1px solid #FFF; padding:8px; width:100%; height:100vh; position:fixed; top:60px; overflow:hidden; } When I click a ...

javascriptjqueryhtmlcss