Плавающие 3 предмета бок о бок

Question

Я пытаюсь получить три блока предметов, чтобы плавать бок о бок, но не может получить его. This is the web page test у меня есть, с HTML структурирована следующим образом:

<div id="thumb1"> 
    <ul> 
     <li><img src="images/JohnShort200x233.jpg" alt="" width="120" border="0" /></li> 
     <li>John Short</li> 
     <li>Gynaecologist</li> 
    </ul> 
</div> 

<div id="thumb2"> 
    <ul> 
     <li><img src="images/JohnFrye200x233.jpg" alt="John Frye - General Surgeon" width="120" border="0"></li> 
     <li>John Frye</li> 
     <li>General Surgeon</li> 
    </ul> 
</div> 

<div id="thumb3"> 
    <ul> 
     <li><img src="images/RichardGearry200x233.jpg" alt="Richard Gearry - Gastroenterologist" width="120" border="0"></li> 
     <li>Richard Gearry</li> 
     <li>Gastroenterologist</li> 
    </ul> 
</div> 

... и со следующими CSS:

ul {width: 120px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 650px; 
    float: left;} 

ul li {width: 120px; 
    list-style: none;} 

li {list-style: none; 
    text-align: center;} 

#thumb1 {float: left;} 

мне нужна фотография, имя и должность каждого человека, чтобы остаться в одном блоке - со следующим рядом с ним. Любая помощь будет оценена по достоинству.

Answer 1

Использование display:inline-block для li и удалить float:left

li { 
     list-style: none; 
     text-align: center; 
     display:inline-block 
    } 

Answer 2

Удалить

width: 650px; из ul.

ul { 
    width: 120px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
} 

Answer 3

Если вы хотите, чтобы выравнивание текста Горизонтально вы можете использовать это ..

li { 
width: 120px; 
list-style: none; 
display: inline-block; 
vertical-align: middle; 
} 

Answer 4

В соответствии с текущим кодом для каждого Div вы можете установить поплавок: левые и ширину 33%

Как

Вы можете добавить этот стиль

div 
{ 
    float: left; 
    width: 33% 
}