Break line inside div but not html - html

Question

I am trying to create a "member list" -> multiple pictures with a name on the bottom next to each other. So far i have this:
<div class = "members">
<div class = "member1" style = "display:inline">
<img src = "head_1.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2" style = "display:inline">
<img src = "head_2.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>
I want to put a line break between the <a> tags but this creates a line break within the html file which causes the next div to appear on the bottom of the previous when I want it to go to the right of it.
I would expect (probably wrongly) putting in the .css file:
.members .member1 {
width: 110px; // or max-width;
}
to make the formatting force the second <a> tag to appear behind the first in each memeber's <div>. How can I achieve what I'm trying to achieve?

Answer 1

.members .member1,.members .member2 {
width: 110px; // or max-width;
display: inline-block;
}
<div class = "members">
<div class = "member1">
<img src = "head_1.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2">
<img src = "head_2.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>

Answer 2

Try this one
.member1 a{
display:list-item;
}
.member2 a{
display:list-item;
}
<div class = "members">
<div class = "member1" style = "display:inline">
<img src = "head_1.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2" style = "display:inline">
<img src = "head_2.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>

Answer 3

Method 1) Remove display:inline of .member1 and .member2 and try this:
.members .member1, .members .member2 {
width: 110px;
display: inline-block;
}
.members .member1, .members .member2 {
width: 110px;
display: inline-block;
}
<div class = "members">
<div class = "member1">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/>
Member 2
</div>
</div>
Method 2) If you need display:inline, just add this code:
.member1,.member2 {
float: left;
width: 110px
}
.member1,.member2 {
float: left;
width: 110px
}
<div class = "members">
<div class = "member1" style = "display:inline">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 80px; height: 100px"/>
Member1
</div>
<div class = "member2" style = "display:inline">
<img src = "http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" style = "width: 100px; height: 100px"/>
Member 2
</div>
</div>