HTML / CSS: разделить на тд нр.2 выровнен по вертикали под делителем в тд 1 - PullRequest
Новая
       1

HTML / CSS: разделить на тд нр.2 выровнен по вертикали под делителем в тд 1

0 голосов
/ 10 августа 2011

У меня проблема: S Я пытаюсь добавить div и таблицу в два tds и выровнять их по вертикали css. Это выглядит так: 

<table>
  <tr>
    <td style='vertical-align: text-top;'>
      <table>
         <tr>
            <td>Some Randomness on some lines<br><br><br>until here.</td>
         </tr>
      </table>
    </td>
    <td style='vertical-align: text-top;'>
      <div style='width: 300px; height: 300px; border: 1px solid red;'>
        Some Random text here also on a few lines...<br><br><br>until here.
      </div>
    </td>
  </tr>
</table>

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

Спасибо за помощь!

Flo

Ответы [ 3 ]

1 голос
/ 10 августа 2011

попробуйте использовать "vertical-align:top" 

<table>
  <tr>
    <td style='vertical-align: top;'>
      <table>
         <tr>
            <td>Some Randomness on some lines<br><br><br>until here.</td>
         </tr>
      </table>
    </td>
    <td style='vertical-align: top;'>
      <div style='width: 300px; height: 300px; border: 1px solid red;'>
        Some Random text here also on a few lines...<br><br><br>until here.
      </div>
    </td>
  </tr>
</table>
0 голосов
/ 11 августа 2011

Я бы установил ширину и высоту TD, используя HTML, использовал свойство valign для TD и, наконец, использовал свойство style, чтобы стилизовать границу вашего TD, используя CSS. 

<td height="300" width="300" valign="top" style="border: 1px solid red;">
   text here
</td>
0 голосов
/ 10 августа 2011

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

<table>
  <tr>
    <td style='vertical-align: text-top;'>
      Some Randomness on some lines<br><br><br>until here.</td>
    <td style='vertical-align: text-top;'>
      <div style='width: 300px; height: 300px; border: 1px solid red;'>
        Some Random text here also on a few lines...<br><br><br>until here.
      </div>
    </td>
  </tr>
</table>

Пример: http://jsfiddle.net/jasongennaro/Q5YGm/

...