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

你能告訴我它在哪個瀏覽器中顯示不正確嗎？