Sort by css

<div class="image"></div>
<div class="sentence"></div>

After I created the site for PC above, I decided to respond to it for smartphone.
How do I get .image under .sentence?

css

2022-09-30 14:20

3 Answers

If it is acceptable for the logical structure to be reversed, you can do the following:

The liver of this sauce is

For PCs, the image is probably fixed in length and width
Make HTML descriptions for smartphones
Describe the CSS for your PC (using Media Query, etc.)

.wrapper{
  position:relative;
}

.images{
  position:absolute;
  top:0;
}

US>.sentence{
  padding-top: 150px; /* image height */
}

<div class="wrapper">
  <div class="sentence">Lorem ipsum</div>
  <div class="images"><img src="https://placehold.jp/150x150.png" alt=">>/div>
</div>

2022-09-30 14:20

Another solution.
If the aspect ratio of the image has been determined:

.wrapper{
  position:relative;
  padding-bottom: 75%; /* image ratio Vertical/horizontal*/
}

img{
  width: 100%;
  height —auto;
  position:absolute;
  bottom:0;
}

<div class="wrapper">
  <div class="images"><img src="https://placehold.jp/400x300.png" alt=">>/div>
  <div class="sentence">Lorem ipsum dolor sitamet, conceptetur adipising elit. Sequi error quote autoem, quad evenietic tempera teneturnemo animatus magnum maxime in realm, modi, remassumenda ea exit;divider ?
</div>

2022-09-30 14:20

Are you simply talking about the layout you want to display?

I can't say for sure because I can't see the whole thing
I think it is difficult or not recommended to solve it with CSS.
If you want to simply replace elements,
I think it's better to do the operation in your own way.

In order for CSS to resolve this issue, the following statements are required:
It is difficult if the height fluctuates dynamically.
Above all, it's not a recommended way to write.
I also commented out the jQuery code and wrote it down, so
I think it is desirable to solve it here.
If you have other elements, try using insertAfter.

//$('.image') .appendTo('.container');

.image{
  width: 100px;
  height —100px;
  margin —10px;
  background:red;
  
  /* Positioning below*/
  position:relative;
  top —110px;
  }

US>.sentence{
  width: 100px;
  height —100px;
  margin —10px;
  background:blue;
  
  /* Positioning below*/
  position:relative;
  top : -110px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
    <div class="image">Elements above </div>
    <div class="sentence"> Elements below </div>
</div>

2022-09-30 14:20

If you have any answers or tips

Popular Tags

python x 4628

android x 1593

java x 1493

javascript x 1425

c x 924

c++ x 877

ruby-on-rails x 696

php x 692

python3 x 683

html x 656