CSS 没有移动到同一行

Question

I am having an issue where two "members" in my website are not showing on the same line.

Here is my HTML:

<h4>Our Team</h4>
    <div class='member'>
        <div class='image'>
            <img src='aj.png'>
        </div>
    <div class='info'>
            <div class='name'>Austin</div>
            <div class='title'>Curator</div>
    </div>
   </div>
    <div class='member'>
        <div class='image'>
            <img src='aj.png'>
        </div>
    <div class='info'>
            <div class='name'>Austin</div>
            <div class='title'>Curator</div>
    </div>
   </div>

Here is my CSS:

.member
{
  width:50%;
  float:left;
  padding:15px 0;
}

.wrapper .right .section .member .image
{
  float:left;
  margin-right:15px;
  width:100px;
  height:100px;
  background-color:#eee;
  -moz-border-radius:51px;
  -webkit-border-radius:51px;
  border-radius:51px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.wrapper .right .section .member .image img
{
  width:100px;
  height:100px;
}

.wrapper .right .section .member .info
{
  padding-top:20px;
  float:left;
}

.wrapper .right .section .member .info .name
{
  font-family:HelveticaNeue-Bold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight:700;
  color:#333;
  font-size:15px;
}

.wrapper .right .section .member .info .title
{
  margin-top:2px;
  font-family:HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight:400;
  font-style:italic;
}

Ideally, I would like the ability for both members to be able to show up on the same line. Right now it's just going above and below.

Answer 1

Actually it looks like you're not closing your div tags properly. Try this:

<h4>Our Team</h4>
<div class="member">
    <div class="image">
        <img src="aj.png">
    </div>
    <div class="info">
        <div class="name">Austin</div>
        <div class="title">Curator</div>
    </div>
 </div>
<div class="member">
    <div class="image">
        <img src="aj.png">
    </div>
    <div class="info>
        <div class='name'>Austin</div>
        <div class='title'>Curator</div>
    </div>
</div>

jsfiddle: http://jsfiddle.net/YTzL4/1/

Answer 2

Have a look at this. Have made some modifications to the css.

http://jsfiddle.net/mail2zam/T49pg/

.member{ 
width:50%;
float:left;
padding:15px 0;}

.member .image{ 
float:left;margin-right:15px;
width:100px;
height:100px;
background-color:#eee;
-moz-border-radius:51px;
-webkit-border-radius:51px;
border-radius:51px;
background-position:center;
background-size:cover;
background-repeat:no-repeat} 

.member .image img{
width:100px;height:100px;}

.member .info{
padding-top:20px;float:left}

.member .info .name{
font-family:"HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica,     Arial, "Lucida Grande", sans-serif;font-weight:bold;color:#333;font-size:15px}

.member .info .title{
margin-top:2px;font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:normal;font-style:italic}

Answer 3

It appears to be working on my end I have also included a fiddlin also.

http://www.fiddl.in/RH6CV4dqg

Can you tell me which browser it is not displaying correctly in?