Проблема с позиционированием таблицы HTML

#html #html-table #alignment

#HTML #html-таблица #выравнивание

Вопрос:

Я в первую очередь не HTML-программист, но я использую HTML для форматирования отображения одного из моих экранов в iPhone. Итак, у меня есть нечто, что должно быть отображением в виде абзаца со встроенным изображением в правом верхнем углу, так что, находясь рядом с изображением, текст переносится и не перекрывается, но будет продолжаться справа, как только он окажется под изображением.

Мне нужна таблица комментариев, размещенная под этим, поэтому, зная, что мой вид имеет ширину 728 пикселей, я сделал

 <table width="768">

Когда я выполняю этот код в уменьшенном виде (шириной 240 пикселей), комментарии появляются под изображением, но в увеличенном виде этого не происходит. Кто-нибудь знает, почему это может произойти?

Вот пример html, который я использую:

 <body bgcolor="#FFFFFF">
 <p>
  <img src="http://www.smspal.com/iPhonePhoto.jpg" width="320" height="480" align="right">
  Tweet
 </p>
 <table width="728" cellpadding="3" cellspacing="0" >
  <tr>
   <td>
    <b>
     <font size="2">Parent1 Parent1</font>
    </b>
   </td>
   <td>
    <p align="right"><font size="1">Tue. May 3, 2011 at 3:47 PM</font></p>
   </td>
  </tr>
  <tr>
   <td colspan="2">
    <p align="left">
     <font size="2">Add a comment</font>
    </p>
   </td>
  </tr>
 </table>
<hr noshade size="1" />
</body>

Ответ №1:

Вы указываете абсолютный размер пикселя в вашей таблице, соответствующий ширине пикселя определенного экрана. Размер является абсолютным, поэтому на меньшем размере экрана слева или справа от него больше ничего не может отображаться, поэтому ему некуда идти, кроме как вниз.

Попробуйте использовать ширину в процентах, поскольку это относительный размер, который будет соответствовать многим различным размерам экрана.

1. Поскольку я нахожусь в режиме просмотра с iPhone, мой экран именно такого размера, как я говорю, но, возможно, вы правы, как мне указать ему использовать процентный размер?

2. width =»80%» это так просто

3. Красиво, работает идеально, теперь мне даже не нужно указывать две ширины для двух устройств

Ответ №2:

Почему бы вам просто не поместить изображение внутрь таблицы? Вы можете использовать атрибут colspan, чтобы сохранить изображение в правом углу.