Using grid how do I have text, and a button next to an image
Question
I am trying to have the picture be in the top left (also responsive) with "Mitchell Niesar", "CS Student", and the button on the right of the image. There should be a small gap between the image and the text as well as between the text elements themselves. I also need the button on the right, with the bottom aligned with the bottom of the image.
Currently, only the title is aligned, the subtitle is at the bottom, and the button is directly below the image. Below is what it looks like now.
Has to be done with grid.
HTML:
.logo { width: 100%; height: auto; max-width: 100%; grid-column: col-start / span 1; grid-column-start: 1; grid-row-start: 1; border-radius: 20%; } .title { grid-column-start: 2; grid-column-end: 2; grid-row-start: 1; grid-row-end: 1; } .subtitle { grid-column-start: 2; grid-row-end: 2; grid-row-start: 2; grid-row-end: 2; color: lightgray } .button { grid-row-start: 3; grid-row-end: 3; justify-self: center; } .card { display: grid; align-content: space-between; width: min-content; white-space: nowrap; }
<html> <head> <meta charset="utf-8"> <title> hmwk08 </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="logo"> <img class="logo shadowed" src="dirt.PNG" type="text/css"> </div> <div class="title"> Mitchell Niesar </div> <div class="subtitle"> CS Student </div> <button class="button"> Say Hello </button> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2020-10-26 19:06:21
Add the following to .button to specify the column that your button needs to go into.
grid-column-start: 2;
grid-column-end: 2;
Also, add the following to the .logo , and remove that class for the img tag
grid-row-start: 1;
grid-row-end: 4;
For obvious reasons, you might also want to change the width of your .logo :)
.logo { width: 100%; height: auto; max-width: 100%; grid-column-start: 1; grid-column-end: 1; grid-row-start: 1; grid-row-end: 4; border-radius: 20%; } .title { grid-column-start: 2; grid-column-end: 2; grid-row-start: 1; grid-row-end: 1; } .subtitle { grid-column-start: 2; grid-column-end: 2; grid-row-start: 2; grid-row-end: 2; color: lightgray } .button { grid-column-start: 2; grid-column-end: 2; grid-row-start: 3; grid-row-end: 3; justify-self: center; } .card { display: grid; align-content: space-between; width: min-content; white-space: nowrap; }
<html> <head> <meta charset="utf-8"> <title> hmwk08 </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="logo"> <img class="shadowed" src="https://images.unsplash.com/photo-1558584724-0e4d32ca55a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" alt> </div> <div class="title"> Mitchell Niesar </div> <div class="subtitle"> CS Student </div> <button class="button"> Say Hello </button> </div> </body> </html>
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.