Я пытаюсь вставить отзывчивое изображение и текстовую ссылку на страницу семинара внутри онлайновой статьи.
Мне показалось, что я могу вписать это в тег рисунка (содержащий стили для промо-бокса).) легко скопировать и вставить его в несколько статей.
Изображение с левой стороны должно занимать 10% ширины рисунка, масштабируясь в соответствии с окном браузера.
Изображение не должноплавать над текстом ниже.
Текст справа должен быть выровнен по верху изображения и разделен на два абзаца, масштабируясь под оставшееся пространство.
Текст не должен обтекатьизображение.
Вокруг изображения и текста должны быть поля размером 10px.
В настоящее время я использую таблицу из двух ячеек, но, кажется, не могу сделать так, чтобы левая ячейка изображения масштабировалась быстро, хотяодновременно масштабируя изображение, чтобы заполнить ячейку на 100%.
Также табличный код кажется неуклюжим излишним излишним.
Есть ли быстрее и проще выполнить это?Возможно, используя бок о бок div?
ETA
Мне советуют, что я могу сделать это просто с помощью div, float и display: inline, но я не могу найтиway?
Текущий код (обновлено по состоянию на 16.05.2009 12:00 UST):
<figure style="margin:20px 0px 20px 0px;border-top:1px solid #555555;border-bottom:1px solid #555555;padding:10px 20px 5px 20px;">
<table border="0" cellpadding="0" cellspacing="30">
<tbody>
<tr>
<td style="width: 15%;" valign="top"><a href="https://mutiny.asia/Workshops/Data-Driven-Decision-Making" target="_blank"><img src="https://mutiny.asia/Portals/0/EasyGalleryImages/770/PortfolioPro/Thumbs/51data-driven-decision-making.png" style="width: 100%;"></a></td>
<td style="padding:5px 0 0 10px" valign="top">
<p>This tutorial is part of our Asia Pacific workshop series covering how effective marketing is empowered by data driven decision making.</p>
<p>You can <a href="https://mutiny.asia/Workshops/Data-Driven-Decision-Making" target="_blank">find out more about our Data Driven Decision Making Workshops here</a>.</p>
</td>
</tr>
</tbody>
</table>
</figure>