How to place <hr> to the right of an image?
Question
I'm having trouble doing my homework with an HTML exercise. Basically I have to place multiple images in different locations on the screen/body but the problem comes from placing a line "hr" element to the right of the image..mine is being placed under it. Here are the photos with my progress and the exercise. I would be glad if someone could help me. Have a great day!
[1] https://imgur.com/6SWWGx1 "Exercise"
[2] https://imgur.com/0qL3V32 "My Progress"
<!DOCTYPE html>
<html>
<head>
<title>ES 8</title>
</head>
<body>
<img src="erba.jpg" width="10%">
<hr>
<img src="erba.jpg" width="30%">
<img src="erba.jpg" width="10%" align="top">
<div><hr align="left" width="20%"></div>
</body>
</html>
2 answers
solution1
1 2019-11-02 10:25:48
That's because by default most elements including <hr/> and <div/> are full-width boxes - or blocks stacked on top of each other. Read a bit more about the box-model of CSS elements here .
Taking it out of that <div/> and changing the <hr/> 's CSS to display: inline-block will add it to the side because it will set it as "inline" to the images. Keep in mind this will only work if it actually has room - so elements widths and borders and margins put together <= 100%.
You can also achieve the same effect with a transparent </div> where you just set one of its border to be visible instead of using <hr/> .
However, looking ahead at the rest of the exercise as well you will probably want to look at at some general layout elements such as flexbox and grid . They make positioning things in the page a whole lot easier once you get the hang of them.
solution2
0 ACCPTED 2019-11-02 10:54:56
Do you want something like this?
.upper img{ width:15% }.lower{ display:flex; border-top:1px solid black; padding-top: 1rem; margin-top:1rem } section{ flex-basis:calc(100% / 3); } section img{ width:100% } section:nth-child(2) div:first-child img{ width:25% } section:nth-child(2){ margin:0 1rem; } section:nth-child(2) div:nth-child(2){ display:flex; justify-content:flex-end; border-top:1px solid black; padding-top:1rem } section:nth-child(2) div:nth-child(2) img{ width:80%; border: 2rem solid black }
<div class="upper"> <img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/> </div> <div class="lower"> <section> <img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/> </section> <section> <div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div> <div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div> </section> <section> <img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/> </section> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.