Обтекание текстом под изображением
Хотя это очень простая ошибка, но я не могу ее решить. Пожалуйста, проверьте следующую ссылку.
http://inimitablesystems.com/demos/interactin/interactin
Под слайдером вы найдете область "БИЗНЕС-УЧРЕЖДЕНИЕ". Он имеет значок изображения и текстовое объяснение. Я хочу, чтобы текст не появлялся под изображением и выровнялся после изображения, где он попадает под изображение. Я тоже пробовал заполнение, но, возможно, я не могу применить его на правом узле.
Пожалуйста, скажите мне, как решить проблему.
Большое спасибо. Ahmad
2 ответа
Пожалуйста, сделайте так, чтобы ваша архитектура заведения была такой.
Основной establishment div с некоторой фиксированной шириной. Тогда разделите это establishment div на две части "left-establishment" а также "right-establishment" ширина:60%. Надеюсь, что этот подход решит вашу проблему.
Поскольку ваша кодовая база уже использует style атрибуты (которые я не рекомендую использовать вообще!), я приведу примеры кода с их использованием.
Подход @ Сами является наиболее желательным решением, так как нет грязных width устанавливаемые значения, не нужно беспокоиться об изменении ширины элемента контейнера и не беспокоиться о добавлении или вычитании текста.
Однако, если вы ищете быстрые исправления без необходимости реструктуризации кода, у меня есть пара для вас, хотя я действительно рекомендую подход @Sami. Я действительно только публикую это, так как уже столкнулся с трудностями при наборе текста до того, как @Sami опубликовал ответ.
Одним из возможных решений было бы явное указание ширины элемента, содержащего ваш текст, а затем поместить его рядом с уже плавающим изображением.
Проблема здесь заключается в том, что явное указание ширины, а также плавающего параметра является довольно грязным, сложным в обслуживании (использование встроенных стилей уже достаточно сложно поддерживать) и приводит к появлению большего количества потенциальных проблем.
<p style="text-align: left; width: 375px;">
<em style="font-style:normal; display:block; width:273px; float:left;">INTERACTin was established 2 years ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of 40-50 staff. Offers 3 occupation types.<br> Operates across various Industries.</em>
</p>
Другое возможное решение состоит в том, чтобы добавить отступ под изображением, чтобы его прямоугольник вытянулся достаточно далеко, чтобы покрыть текст.
Этот подход обязательно потерпит неудачу, если ширина содержащего элемента когда-либо изменяется или добавляется больше текста. Опять же, это затрудняет поддержание.
(Я должен был использовать !important в примере кода, так как ваш сайт уже использует !important что, как правило, в большинстве случаев не нужно, если вы следуете правилам конкретизации.)
<img src="http://inimitablesystems.com/demos/interactin/assets/assets/img/events-icon.png" class="pull-left" style="padding-bottom:60px!important;">