[Решено] CSS3 картинка и текст две адаптированные колонки

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем ottawa1, 1 окт 2016.

Статус темы:
Закрыта.
  1. ottawa1

    ottawa1

    Регистрация:
    1 окт 2016
    Сообщения:
    3
    Симпатии:
    0
    Здравствуйте. Дайте совет как сделать в CSS3 картинка и текст две адаптированные колонки. Слева картинка справа текст.
     
  2. YoYo

    YoYo

    Регистрация:
    20 июл 2016
    Сообщения:
    120
    Симпатии:
    27
  3. ottawa1

    ottawa1

    Регистрация:
    1 окт 2016
    Сообщения:
    3
    Симпатии:
    0
    Привет. Спасибо за труды. Проверил к сожалению картинка не уменьшается. я тут кое что написал. Картинка уменьшается. Как с текстом быть только не знаю. Если время и желание есть подскажите. Текст в столбце справа должен быть, а он внизу.
    Код:
    <style type="text/css">
    * { margin: 0px; padding: 0px; }
    img { width: 100%; height: auto; }
    .two-columns { width: 48%; display: inline-block; }
    
    @media (min-width: 420px) {
      .breakpoint { max-width: 48%; }
    }
    @media (min-width: 760px) {
      .breakpoint { max-width: 24%; }
    }
    
    .container { position: relative; width: 96%; max-width: 960px; margin: 0px auto; text-align: center; }
    .container1 { position: relative; width: 96%; max-width: 960px; margin: 0px auto; text-align: center; }
    
    @media (max-width: 400px) {
      body { font-size: 16px; }
     
    }
    
    </style>
          <section id="responsive-images-columns">
          <div class="container">
          <img class="two-columns" src="images/image01.jpg" width="960" height="640" />
          </div>
          <div class="container1" class="two-columns">       
    <h4>
    Содержание номера</h4>
    <h4>
    Статьи</h4>
    <ul style="text-indent:1.5em; text-align:justify; font-weight:500;">
    <li>К сожалению, веб–дизайн еще не достиг</li>
    <li>К сожалению, веб–дизайн еще не достиг</li>
    <li>К сожалению, веб–дизайн еще не достиг</li>
    <li>К сожалению, веб–дизайн еще не достиг</li>
    <li>К сожалению, веб–дизайн еще не достиг</li>
    <li>К сожалению, веб–дизайн еще не достиг</li>
    <li>К сожалению, веб–дизайн еще не достиг</li>
    <li>К сожалению, веб–дизайн еще не достиг</li>
    </ul>
    <h4>
    Рисунки</h4>
    <ul style="text-indent:1.5em; text-align:justify; font-weight:500;">
    <li>рамки программный или разметочный код.</li>
    <li>рамки программный или разметочный код.</li>
    <li>рамки программный или разметочный код.</li>
    <li>рамки программный или разметочный код.</li>
    <li>рамки программный или разметочный код.</li>
    </ul>   
        </div>
      </section>
    ПРИМЕРНО ТАКАЯ КАРТИНКА
    [​IMG]
     
  4. ottawa1

    ottawa1

    Регистрация:
    1 окт 2016
    Сообщения:
    3
    Симпатии:
    0
    Ну все разобрался. спасибо за помощь
     
Статус темы:
Закрыта.