Utilize CSS to position an image in four various locations on a web page

Question

Utilize CSS to position an image in four various locations on a web page

Expressing this may be a challenge, but I'll give it a shot. Within a div, there is text that can vary in length based on user input.

My goal is to have the ability to insert an image in one of several positions, determined by the selection made in a dropdown menu:

Above the text
Below the text
To the left of the text
To the right of the text

I'm curious if there's a simple way to maintain the same structure in the markup, like so:

<img src="">
<span>Text</span>

And then use CSS to adjust the position of the image accordingly. It's worth noting that the dimensions of the text are variable, making it impractical to rely on specific pixel measurements.

If feasible, I would prefer not to resort to using javascript for this purpose.

html css

Answer 1

Answer №1

Everything you need is right here:

.container {
  display: flex;
}

#p-below:checked ~ .container {
  flex-direction: column-reverse;
}
#p-right:checked ~ .container {
  flex-direction: row-reverse;
}
#p-above:checked ~ .container {
  flex-direction: column;
}

.container {
  display: flex;
}

#p-below:checked ~ .container {
  flex-direction: column-reverse;
}
#p-right:checked ~ .container {
  flex-direction: row-reverse;
}
#p-above:checked ~ .container {
  flex-direction: column;
}


/* everything below is completely optional */

.container {
  justify-content: center;
  align-items: center;
}
.container > .text {
  border: 1px solid #424242;  
  padding: 1rem;
}

.container .image > img {
  display: block;
}

<input name="position" type="radio" checked id="p-above" />
<label for="p-above">Above</label>
<input name="position" type="radio" id="p-below" />
<label for="p-below">Below</label>
<input name="position" type="radio" id="p-left" />
<label for="p-left">Left</label>
<input name="position" type="radio" id="p-right" />
<label for="p-right">Right</label>

<div class="container">
  <div class="image"><img src="http://lorempixel.com/g/400/300" /></div>
  <div class="text">Lorem ipsum dolor sit amet. Have as much text here as you like.</div>
</div>

Answer 2

Everything you need is right here:

.container {
  display: flex;
}

#p-below:checked ~ .container {
  flex-direction: column-reverse;
}
#p-right:checked ~ .container {
  flex-direction: row-reverse;
}
#p-above:checked ~ .container {
  flex-direction: column;
}

.container {
  display: flex;
}

#p-below:checked ~ .container {
  flex-direction: column-reverse;
}
#p-right:checked ~ .container {
  flex-direction: row-reverse;
}
#p-above:checked ~ .container {
  flex-direction: column;
}


/* everything below is completely optional */

.container {
  justify-content: center;
  align-items: center;
}
.container > .text {
  border: 1px solid #424242;  
  padding: 1rem;
}

.container .image > img {
  display: block;
}

<input name="position" type="radio" checked id="p-above" />
<label for="p-above">Above</label>
<input name="position" type="radio" id="p-below" />
<label for="p-below">Below</label>
<input name="position" type="radio" id="p-left" />
<label for="p-left">Left</label>
<input name="position" type="radio" id="p-right" />
<label for="p-right">Right</label>

<div class="container">
  <div class="image"><img src="http://lorempixel.com/g/400/300" /></div>
  <div class="text">Lorem ipsum dolor sit amet. Have as much text here as you like.</div>
</div>

Answer 3

Answer №2

To position the image to the left, right, or center of the text, apply the float property in the stylesheet. It is not possible to use CSS to place the image below the text.

Answer 4

To position the image to the left, right, or center of the text, apply the float property in the stylesheet. It is not possible to use CSS to place the image below the text.

Utilize CSS to position an image in four various locations on a web page

Answer №1

Answer №2

Similar questions

What is the method for adjusting the size of text while rendering on a canvas?

Angular 1.4.8 Issue: [$injector:modulerr]

Reset input fields upon jQuery removal

Is there a way to eliminate the scrollbar from the purecss navbar?

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

Identifying browser compatibility for date input type with Angular 2 and above

Concealing a Parent Container Using jQuery

Achieving a Pushing Footer Design with Content

File index with Node.js server for handling files

Provide the option to assign values on select options in order to choose specific JSON data

How to determine if an Angular list has finished rendering

Following the build in Angular, it only displays the index.html file and a blank screen

Subdomain Dilemma: Trouble with Images in Internet Explorer

Customizing CSS styles for various screen dimensions

The Google API is experiencing issues when using input that has been added on

Having trouble with tabs in jQuery?

Illuminate the rows in a table generated from a parsed text file using PHP

An adaptive image-based menu design that adjusts based on screen size

Tips on changing the outline color by clicking

Create a division element with an image that can be dragged around