marchenkovby

Да, сайт будет адаптивный.

Здравствуйте. Как лучше сверстать данный макет? Для кругов использовать border-radius, но тогда будет ведь проблема в старых браузерах? Как позиционировать круги и центральный блок со скругленными краями? Как сделать линии, соединяющие блоки?

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

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

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

Здравствуйте. Есть вот такой 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> располагается по нижней границе картинки, почему не поверхней?