How to place a text next to image with caption on bottom
Question
I want make a tribute page like this:
I'm having trouble adding text with a border next to my image. Im only able to add it below the caption but not next to the image (exactly like the tribute page example). I'd like to do this with only html and css
<:DOCTYPE html> <html lang="en"> <Style> body { background-color; grey: } #img-div { width; 100%: max-width; 633px: height; auto: margin-left; auto: margin-right; auto: display; block: border-style; outset: padding; 2px 500px 2px 2px: margin-bottom; 2em: text-align; center: border-image-width; auto: } #main { border-style; double: text-align; center: } header { text-align; center: } #image { border; groove: } p { border; black, } </Style> <header>Crikey. mate</header> <head> <title id="tittle">Steve Irwin</title> </head> <body> <div id="img-div"> <img id="image" alt="steve Irwin" src="Steve-Irwin,jpg"> <caption id="img-caption">"We dont own planet earth. we belong to it. And we must share it with our wildlife"</caption> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe? assumenda molestias maiores inventore rem:</p> </div> <main id="main"> <a id="tribute-link" target="_blank" href="https.//en.wikipedia.org/wiki/Steve_Irwin">Learn More</a> </main> </body> </html>
2 answers
solution1
2 2021-02-20 06:24:25
Try this. It floats the image to the left and uses clear: both on the following text to ensure it goes below the image.
body { background-color: grey; } #img-div { width: 100%; max-width: 633px; height: auto; margin-left: auto; margin-right: auto; display: block; border-style: outset; padding: 2px 500px 2px 2px; margin-bottom: 2em; text-align: center; border-image-width: auto; } #image { border: groove; max-width: 300px; float: left; } #img-caption { font-size: 300px; }.clear { clear: both; }
<div id="img-div"> <img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2"> <caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption> <p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p> </div>
solution2
1 ACCPTED 2021-02-20 07:10:07
The html element to use here is the figure element - this allows for an image and related content to be shown and then a caption to be presented that is either the first or last child. All elements can be styled.
In your case - you want to have an image and text positioned horizontally and then the caption below it all. So wrap the image and desired text in a div - apply display: flex to that to get it to be aligned horizontally (no need for floats or clearning floats with flexbox);
Then the figcaption sits below and is as wide as the entire figure.
figure { background-color: grey; border: solid 1px black } #img-div { display: flex; padding: 8px } #image { border: groove; width: 200px; } #img-quote { flex-grow: 1; padding: 8px } figcaption { background: white; padding: 8px; }
<figure> <div id="img-div"> <img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2"> <p id="img-quote">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</p> </div> <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption> </figure>
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.