<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p> <p>text 2</p>Instead of using the <br> tag, I want my text1 and text2 to display next to the image. Is there a way to achieve this layout: 'img here' 'text1' 'text2' ? Thanks.
Applying the following CSS would achieve the desired result:
img, p {
display:inline-block;
}
Here is a simple solution for your CSS needs:
img{
display:inline;
}
p{
display:inline;
}<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p> <p>text 2</p>One way to achieve inline display in CSS is by using the display:inline property!
<img src=".."/>
<p style="display:inline">text1</p>
<p style="display:inline">text1</p>
It's best practice to always use a class and apply your styles to the class rather than directly to an element. This way, you have more precise control over which elements receive a specific style.
.image-style,.para1,.para2 {
display: inline-block;
margin-right: 5px;
}<img class="image-style" src="http://cdn.exampleimages.com/example.jpg"><p class="para1">text 1</p> <p class="para2">text 2</p>Using the float property is the most effective way to achieve this.
img {
float: left;
padding-right:5px;
}<img src='http://placehold.it/220x220'>
<p>
Some text here.
</p>
<p>
Some more text to follow.
</p>This viewpoint is supported not just by me, but by w3schools as well:
In its simplest use, the float property can be used to wrap text around images.
After researching how to utilize JavaScript drag functionality to move elements, the goal is to dynamically adjust the cursor position within a square when dragged. In an attempt to simplify the process and avoid storing x and y offsets as separate variabl ...
Upon adding a WYSIWYG editor to my HTML code, I encountered an error despite having included all the necessary JS files. xyz.html <html> <head> <script src="js/angular/angular.min.js"></script> <script src= ...
I have successfully created a Chat Room using PHP, but I am facing an issue where only the messages are being displayed without the corresponding usernames. Separate databases for usernames and messages have been set up, yet the usernames are not appearing ...
Currently in the process of constructing a slide-box containing numerous items. I've borrowed the code from the example provided here for an infinite number of items, and it's performing well. However, I have a considerable yet finite amount of ...
Greetings! I am currently working on developing backends in ASP.NET 2.0, and have taken steps to optimize the performance by caching images, GZIPing CSS and JS files. The load speed of each option is good, but I am eager for even faster loading times. Alt ...
Can anyone help me with my issue regarding Bootstrap scrollspy settings? It seems to be highlighting the wrong div id, always the last one. Here is the code snippet: Content: <body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> ...
I've been working on creating a chatbot widget for my website, but I've run into an issue. The "Chat with us" button only shows the bot and not the close button as well. Here's what I've attempted: <input id="chat" type="button" on ...
I'm attempting to link each word within an element without altering the markup inside the element using Javascript. ...
I have been attempting to set a foreign key as read-only in my Django forms. I am developing a web application with system management capabilities and I need to prevent specific users from altering a certain field after it has been submitted. class Approv ...
I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...
Currently, I am working on a project in Reactjs with Nextjs. To add CSS to my project, I have stored my CSS files in the 'styles' folder. In order to include them, I created a file called '_document.js' and implemented the following cod ...
While attempting to build a single page application (SPA), I've encountered an issue with using the Grid component from material-ui. Normally, I rely heavily on the Grid, but in this new project, something seems amiss. The current problem is evident ...
After adding a button and writing the necessary code for implementing a modal in AngularJS, I encountered an issue where the modal was not displaying as expected. Below is the HTML code snippet that I used: <body> <div ng-controller="Mod ...
I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...
Currently, I am in the process of developing a browser extension (content script) that is capable of scanning and highlighting specific words on a webpage. This extension utilizes AJAX and PHP to display content in a tooltip when a user hovers over these h ...
I am having trouble sending form data to my server using AJAX. Despite writing the following code, I keep receiving a 400 Bad error. Can anyone assist me with this? $(document).ready(function(){ // click on button submit $("#submit").on('clic ...
I recently started learning JavaScript and I'm encountering some difficulties with my code. My assignment is to create a hangman game, and I've successfully implemented the loops for displaying "right" and "wrong" letters. However, I'm strug ...
Currently working on a website project for a company that requires certain steps to be completed for deliveries. Unfortunately, I am facing issues with the submit button, and I apologize as I am still new to this. The code I have pasted is divided into tw ...
Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here ...
Can anyone help me figure out how to prevent the border from being drawn inside of my submit button element? I have a specific width and height set for cross-browser consistency, but in Firefox 15 and IE7 the border gets applied to the inside of the elemen ...