I gave you a small example of what you wanted.
The example uses a flex rule. Also, I used pseudo-class :nth-child() to define a child element in order to assign unique rules for displaying images and text in order.
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.unit {
display: inherit;
align-items: center;
}
.more {
display: inherit;
flex-direction: column;
}
.unit img {
width: 200px;
height: auto;
border-radius: 50%;
}
.unit:nth-child(1) {
flex-direction: row;
}
.unit:nth-child(2) {
flex-direction: row-reverse;
}
<div class="container">
<div class="unit">
<img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
<div class="more">
<h1>James</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul>
<li><span>Text</span> Text</li>
</ul>
</div>
</div>
<div class="unit">
<img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
<div class="more">
<h1>James</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul>
<li><span>Text</span> Text</li>
</ul>
</div>
</div>
</div>
Here You have a Solution with minimal css.
Use display:flex; and justify-content:space-between; on your parent container and use align-self:flex-end; property for the child element on the end.
#user-data-container{
width:500px;/*Specify your width here*/
height:150px;/*specify your height here*/
border:1px solid #000;
display:flex;
justify-content:space-between;
}
div#last-child{
align-self:flex-end;
}
#user-data-container>div{
display:flex;
align-items:center;
}
#first-element{
align-self:flex-start;
}
<div id="user-data-container">
<div id="first-element"><img src="https://placehold.it/60/60"/>Text Here</div>
<div id="last-child">Text Here<img src="https://placehold.it/60/60"/></div>
</div>
I’m a new Developer, still in the process of learning and have been working on a website for a friend to practice.
I am adding a ‘Meet the team’ type section on the page and would like it to be displayed as shown in the image linked here:
- team member 1 photo with bio next to it aligned to the left..
- .. and below that, team member 2 photo with bio next to it aligned to the right.
I’ve been playing with Flexbox to get this to work but having issues such as having them both appear next to each other so tried adding each team member into their own section to separate the code and that hasn’t worked well either.
Code for second issue:
<div class="members">
<div class="unit">
<img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
<h1>James</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<ul>
<li><span>Text</span> Text</li>
</ul>
</div>
<div class="unit">
<img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
<h1>Jamie</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul>
<li><span>Tet:</span> Text</li>
</ul>
</div>
</div>
@0stone0, What for? This is only used when you have a large collection. But when there are two identical classes, then it is possible without
That’s perfect – I knew it had to be a lot simpler than I was making it out to be. Thank you!
@f8cts, no problem. Glad to help!
