Как расположить элементы на странице таким образом?

[marchenkovby]

Здравствуйте.

Есть вот такой HTML-код:

<div>
	<h3>Настройка модема</h3>	
<ul>
  
  <!-- Первый элемент —>
  <li>
    <a href="#">
    <img width="59" height="59" src="https://test.lan1.by/no_image.png" alt="" />
      Как подключить ZALA по Wi-Fi на ZTE F660v5
    </a>
    <div>
      <span class="date"><i class="fa fa-clock-o fa-lg" aria-hidden="true"></i> 03.11.2017</span>
      <span class="view"><i class="fa fa-eye fa-lg" aria-hidden="true"></i> 1300 просмотров</span>
      <span class="comments"><i class="fa fa-comments fa-lg" aria-hidden="true"></i> 6 комментариев</span>
    </div>
  </li>
  <!-- Первый элемент —>
  
  <!-- Второй элемент —>
  <li>
    <a href="#">
    <img width="59" height="59" src="https://test.lan1.by/no_image.png" alt="" />
    Настройка VPN на HUAWEI HG8245A
    </a>
    <div>
      <span class="date"><i class="fa fa-clock-o fa-lg" aria-hidden="true"></i> 02.11.2017</span>
      <span class="view"><i class="fa fa-eye fa-lg" aria-hidden="true"></i> 1200 просмотров</span>
      <span class="comments"><i class="fa fa-comments fa-lg" aria-hidden="true"></i> Комментариев нет</span>
    </div>
  </li>
  <!-- Второй элемент —>

  <!-- Третий элемент —>
  <li>
    <a href="#">
    <img width="59" height="59" src="https://test.lan1.by/no_image.png" alt="" />
    Как создать 2-ую точку доступа Wi-Fi на модеме ZXHN H208N
    </a>
    <div>
      <span class="date"><i class="fa fa-clock-o fa-lg" aria-hidden="true"></i> 01.11.2017</span>
      <span class="view"><i class="fa fa-eye fa-lg" aria-hidden="true"></i> 1100 просмотров</span>
      <span class="comments"><i class="fa fa-comments fa-lg" aria-hidden="true"></i> Комментариев нет</span>
    </div>
  </li>
  <!-- Третий элемент —>
 
  <!-- Четвертый элемент —>
  <li>
    <a href="#">
    <img width="59" height="59" src="https://test.lan1.by/no_image.png" alt="" />
    Как создать 2-ую точку доступа Wi-Fi на модеме EchoLife HG8245H
    </a>
    <div>
      <span class="date"><i class="fa fa-clock-o fa-lg" aria-hidden="true"></i> 29.10.2017</span>
      <span class="view"><i class="fa fa-eye fa-lg" aria-hidden="true"></i> 1000 просмотров</span>
      <span class="comments"><i class="fa fa-comments fa-lg" aria-hidden="true"></i> 9 комментариев</span>
    </div>
  </li>
  <!-- Четвертый элемент —>
  
</ul>
</div>

Отображается он сейчас так:

Ccылка на codepen: 

Hеобходимо сделать так:

И ещё один вопрос, почему изначально текст (например, "Как подключить ZALA по Wi-Fi на ZTE F660v5") возле тега <img> располагается по нижней границе картинки, почему не поверхней?

Edited November 23, 2017 by marchenkovby

[AlexZaw]

https://codepen.io/AlexZaw/pen/bYKowR

[marchenkovby]

AlexZaw, спасибо за ответ. Картинка и название статьи были ссылкой. Сейчас же, когда обрамили в разные <div>, ссылкой является только название статьи. Хотелось так, чтобы и название статьи и картинка были одной ссылкой. Как это можно сделать?

Edited November 24, 2017 by marchenkovby

[AlexZaw]

поправил, результат по той-же ссылке

[marchenkovby]

16 часов назад, AlexZaw сказал:

поправил, результат по той-же ссылке

Спасибо ещё раз за ответ. Скажите, а можно добиться того же результата, не используя position, а как-нибудь по-другому?

Edited November 25, 2017 by marchenkovby

[AlexZaw]

Если только использовать предыдущий вариант и сделать картинку отдельной ссылкой.

Другого выхода я не вижу. А чем не устраивает вариант с позиционированием?

[SelenIT]

В 11/23/2017 в 21:57, marchenkovby сказал:

почему изначально текст (например, "Как подключить ZALA по Wi-Fi на ZTE F660v5") возле тега <img> располагается по нижней границе картинки, почему не поверхней?

Потому что картинка — строчный элемент, и выравнивается нижним краем по базовой линии текста (как будто это очень большая буква текста). Поскольку она выше букв, она «выталкивает» собой эту базовую линию вниз, а вместе с ней и текст.

Чтобы это отключить, надо задать ей обтекание (float). А чтобы ограничить это обтекание текущим пунктом списка, надо добавить ему самому (чтобы он не цеплялся за предыдущие float-ы) и его псевдоэлементу ::after (чтобы картинка из него не вываливалась) сброс обтекания (clear). Примерно так.

[marchenkovby]

В 25.11.2017 в 09:41, AlexZaw сказал:

Если только использовать предыдущий вариант и сделать картинку отдельной ссылкой.

Другого выхода я не вижу. А чем не устраивает вариант с позиционированием?

C позиционированием вариант я знал. Хотел узнать какие про другие варианты. Спасибо за ответ ещё раз!

В 25.11.2017 в 16:16, SelenIT сказал:

Потому что картинка — строчный элемент, и выравнивается нижним краем по базовой линии текста (как будто это очень большая буква текста). Поскольку она выше букв, она «выталкивает» собой эту базовую линию вниз, а вместе с ней и текст.

Чтобы это отключить, надо задать ей обтекание (float). А чтобы ограничить это обтекание текущим пунктом списка, надо добавить ему самому (чтобы он не цеплялся за предыдущие float-ы) и его псевдоэлементу ::after (чтобы картинка из него не вываливалась) сброс обтекания (clear). Примерно так.

Теперь стало яснее. Спасибо за ваш код!