can someone help me? I want to align the "End text" to the right side of the .Container
to be horizontally in the same row with the First name: John
.
(Recommend you when run my code to check in full screen,because you can't see well the whole container in a small window )
Check the image,this is how I want to look like:
* { margin: 0; padding: 0; color: white; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-weight: 700; } body { background-color: black; font-family: 'Poppins', sans-serif; overflow-x: hidden; height: 100%; padding: 0; margin: 0; } .Container { display: flex; align-items: center; margin: 0 auto; width: 75%; height: 250px; border-bottom: 2px solid white; } .Container span { color: white; font-size: 25px; margin-left: 30px; margin-right: 30px; } .dataContainer { font-size: 20px; display: inline-grid; line-height: 3rem; } .endtext { display: flex; justify-content: space-between; }
<div class="Container"> <span>Data:</span> <div class="dataContainer"> <div class="endtext"> <p>First Name: John</p> <p>End text</p> </div> <p>Last Name: Williams</p> <p>Age: 23</p> </div> </div>
You're almost there. You have to tell certain children of a flex container to "grow" to fill in the remaining space. Add flex-grow: 1
to the .dataContainer
.
Without the grow, you can see that the red .dataContainer
doesn't fill the parent (blue) .Container
.
After adding flex-grow: 1
- it fills the parent as you would expect:
Since you are using space between you need to make the container 100%
.dataContainer { width: 100%; }
* { margin: 0; padding: 0; color: white; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-weight: 700; } body { background-color: black; font-family: 'Poppins', sans-serif; overflow-x: hidden; height: 100%; padding: 0; margin: 0; } .Container { display: flex; align-items: center; margin: 0 auto; width: 75%; height: 250px; border-bottom: 2px solid white; } .Container span { color: white; font-size: 25px; margin-left: 30px; margin-right: 30px; } .dataContainer { font-size: 20px; display: inline-grid; line-height: 3rem; width: 100%; } .endtext { display: flex; justify-content: space-between; }
<div class="Container"> <span>Data:</span> <div class="dataContainer"> <div class="endtext"> <p>First Name: John</p> <p>End text</p> </div> <p>Last Name: Williams</p> <p>Age: 23</p> </div> </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.