За последние 24 часа нас посетили 25247 программистов и 1736 роботов. Сейчас ищут 913 программистов ...

Расположение текста рядом с картинкой

Тема в разделе "HTML и CSS", создана пользователем q0b3rMAN, 10 окт 2011.

  1. q0b3rMAN

    q0b3rMAN Активный пользователь

    С нами с:
    11 июн 2011
    Сообщения:
    142
    Симпатии:
    0
    В общем задача, нужно расположить текст рядом с картинкой.
    По примеру форумов:
    [​IMG]

    Как такое провернуть, подскажите пожалуйста.
     
  2. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    Просто один из вариантов:
    HTML:
    1. <style type="text/css">
    2.     table tr td {
    3.         text-align: left;
    4.         vertical-align: middle;
    5.     }
    6.     <tr>
    7.         <td>
    8.             <img src="image.jpg" style="width: 70px; height: 50px;" />
    9.         </td>
    10.         <td>
    11.             <b>Строка текста</b><br />
    12.             Ещё строка текста
    13.         </td>
    14.     </tr>
     
  3. q0b3rMAN

    q0b3rMAN Активный пользователь

    С нами с:
    11 июн 2011
    Сообщения:
    142
    Симпатии:
    0
    Спасибо, работает!
    Другая проблема: Чем длиннее текст второй строки, тем дальше двигается вправо первая строка, как исправить?
     
  4. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    Назначить ширину стлолбцов вручную.
    HTML:
    1. <td width="100">...</td><td width="500">...</td>
     
  5. q0b3rMAN

    q0b3rMAN Активный пользователь

    С нами с:
    11 июн 2011
    Сообщения:
    142
    Симпатии:
    0
    Спасибо! Теперь у меня вот такое:
    HTML:
    1.  
    2.  <td width="10"><b>Новости</b><br /><br></td>
    3. <td width="420">Новости и акции нашего игрового проекта, обсужение нововведений</td>
    Вторая строка дальше чем первая, как их выравнить? Заранее спасибо.
     
  6. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    q0b3rMAN
    может стоит почитать про хтмл? поверь, там не так уж и сложно - можно за пару дней выучить, зато на всю оставшуюся жизнь
     
  7. q0b3rMAN

    q0b3rMAN Активный пользователь

    С нами с:
    11 июн 2011
    Сообщения:
    142
    Симпатии:
    0
    мне лень.ну что сложно написать что-ле? или кинуть ссылку сразу на эти ширины <td>
     
  8. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    сам же ответил
     
  9. fastwebcode

    fastwebcode Активный пользователь

    С нами с:
    22 окт 2011
    Сообщения:
    2
    Симпатии:
    0
    HTML:
    1. <style type="text/css">
    2. .cll{
    3.     clear: left;
    4. }
    5. .wr_items{
    6.     width: 500px;
    7.     margin: 0 auto;
    8.     text-align:left;
    9. }
    10. .item_img{
    11.     background-color: #eee;
    12.     width: 98px;
    13.     height: 98px;
    14.     float: left;
    15.     border:1px solid #555;
    16. }
    17. .item_cont{
    18.     width: 400px;
    19.     background-color: #eee;
    20.     float: left;
    21.     height: 100px;
    22. }
    23. .text{
    24.     margin:5px 0 10px;
    25.     padding: 0 10px;
    26. }
    27. <div class="wr_items">
    28.     <div class="item_img"></div>
    29.     <div class="item_cont">
    30.         <h1 class="title">Chapter</h1>
    31.         <p class="text">В общем задача, нужно расположить текст рядом с картинкой.</p>
    32.     </div>
    33.     <div class="cll"></div>
    34. </div>