CSS 没有移动到同一行

Question

我遇到了一个问题，我的网站中的两个“成员”没有显示在同一行上。

这是我的 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>

这是我的 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;
}

理想情况下，我希望两个成员都能够出现在同一条线上。 现在它只是上下移动。

Answer 1

实际上，您似乎没有正确关闭 div 标签。 尝试这个：

<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

看看这个。 对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

它似乎对我有用，我还包括了一个小提琴手。

http://www.fiddl.in/RH6CV4dqg

你能告诉我它在哪个浏览器中显示不正确吗？