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

Question

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

0

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

   <!-- 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>

user3204342 16 янв. 2014, в 23:24

Источник

0

Пожалуйста, укажите, какой браузер вы используете, приведенный выше код должен работать. Или добавьте контейнер div и связанный css
Huangism 16 янв. 2014, в 21:48
0

@Phlume Последний элемент не нужен
Huangism 16 янв. 2014, в 21:50
0

Я использовал хром, но ясно, что ни одна из них не работает, или я не учитывал 15 пикселей на каждой стороне изображения
user3204342 16 янв. 2014, в 22:16

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

0

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

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

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

Christina 16 янв. 2014, в 20:14

0

«По умолчанию у div есть свойство display: block; это означает, что они будут отображаться рядом». Разве вы не имеете в виду одно за другим?
Huangism 16 янв. 2014, в 21:49
0

Да, я оговорился. Ред.
Christina 16 янв. 2014, в 21:50
0

также, насколько я знаю, вам не нужно очищать ни один, чтобы получить 2 плавающих элемента рядом, если их общая ширина не превышает ширину контейнера ( jsfiddle.net/WGyzw )
Huangism 16 янв. 2014, в 21:52
0

Это неплохая идея для пользователя, чтобы добавить его, так как кажется, что они все еще экспериментируют со своим форматом, и их конечная цель состоит в том, чтобы убедиться, что они могут помещать элементы div рядом.
Christina 16 янв. 2014, в 21:57
0

если ясно, что никто не решает проблему, то причина не в указанном коде
Huangism 16 янв. 2014, в 22:01
1

Кажется, есть работы, спасибо
user3204342 16 янв. 2014, в 22:06

Показать ещё 4 комментария

Ещё вопросы

Пожалуйста, укажите, какой браузер вы используете, приведенный выше код должен работать. Или добавьте контейнер div и связанный css
Я использовал хром, но ясно, что ни одна из них не работает, или я не учитывал 15 пикселей на каждой стороне изображения
«По умолчанию у div есть свойство display: block; это означает, что они будут отображаться рядом». Разве вы не имеете в виду одно за другим?
также, насколько я знаю, вам не нужно очищать ни один, чтобы получить 2 плавающих элемента рядом, если их общая ширина не превышает ширину контейнера ( jsfiddle.net/WGyzw )
Это неплохая идея для пользователя, чтобы добавить его, так как кажется, что они все еще экспериментируют со своим форматом, и их конечная цель состоит в том, чтобы убедиться, что они могут помещать элементы div рядом.
если ясно, что никто не решает проблему, то причина не в указанном коде

D_N · Accepted Answer · 2014-01-16T19-50-00.000Z

Вам нужно проверить две вещи:

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

Это не было проблемой, но это был хороший момент, что мне нужно учитывать дополнительные 30px
На самом деле, с объявленным процентом, это не произойдет в большинстве браузеров в любом случае. Я бы проверил наследование (убедитесь, что нет другого правила, переопределяющего float или очищающего его).