Sort by css

Asked 1 months ago, Updated 1 months ago, 1 views

<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


© 2022 OneMinuteCode. All rights reserved.