Как я могу получить эти ссылки и изображения, чтобы появиться inline

Question

Это кажется таким простым, но я, по-видимому, терпит неудачу у него по какой-то причине. Поэтому у меня есть 3 изображения, и у каждого изображения есть ссылка над ним. Я хочу, чтобы они появлялись inline, и я не могу использовать таблицу, поэтому я попробовал divs, но они появляются один за другим, а не inline. примечание: моя ширина страницы 1000px

<!-- First Div with link and image--> 
    <div style="float:left;width:33%"> 
     <a href="/bartop">BarTop Epoxy</a> 
     <img style="margin: 15px;"src="image1" width="300" height="315"> 
    </div> 
    <!-- Second Div with link and image--> 
    <div style="float:left;width:33%"> 
     <a href="/counter top"> Countertop</a> 
     <img style="margin: 15px;" src="image2" width="300" height="315"> 
    </div> 
    <!--third Div with link and image--> 
    <div style="float:left;width:33%"> 
     <a href="/flooring">Flooring</a> 
     <img style="margin: 15px;" src="image3" width="300" height="315"> 
    </div> 

Answer 1

Есть две вещи, которые необходимо проверить:

1. То, что DIVs не клиринговые - они должны иметь clear:none объявленную или по наследству.
2. Чтобы у вас было достаточно места в контейнере для всех этих предметов. Ваши поплавки содержат элементы шириной 300 пикселей с дополнительными 30 пикселями поля. Является ли ваш контейнер шириной 990 пикселей? Или даже шириной 660 пикселей? Поплавки скатываются вниз под предыдущим поплавком, если для них недостаточно места.

Answer 2

По умолчанию divs имеют свойство display: block;, то есть они не будут отображаться на одной строке.

Вы можете исправить это, сделав дисплей float, как и вы, но вы также должны добавить стиль clear: none;, чтобы быть уверенным, что плавающие элементы могут быть бок о бок.

В качестве альтернативы вы можете использовать display: inline-block;, что может работать лучше для того, что вы пытаетесь сделать, и here's a jsfiddle с этой опцией.