Css выровнять вправо и влево одновременно

У меня проблема с отображением это (проверьте это изображение) У меня слева есть ссылка, а справа - значки со словами. Как правильно это показать? и как мне вывести слова под иконками? Мне нужна помощь с этим. Пожалуйста, проверьте прикрепленное изображение, чтобы увидеть, как оно мне нужно.

<div class = "back-to-listing-clinic">  
  <div> 
    <a> < back </a>
  </div>
  <div class = "right-icons-part">
    <img class = "clinic-top-icons"src = "./assets/images/icons/forum.png"> 
    <img class = "clinic-top-icons" src = "./assets/images/icons/forum.png"> 
    <img class = "clinic-top-icons" src = "./assets/images/icons/forum.png"> 
  </div>
  <div> 
    <p> Icon1 </p>
    <p> Icon2 </p>
    <p> Icon3 </p>
  </div>
</div>

Я не вижу слов в вашем HTML. Было бы полезно создать рабочий пример для демонстрации.

— 15.03.2018 19:22

@showdev Я добавил это

— 15.03.2018 19:28

html css alignment

15.03.2018 19:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Есть дюжина способов сделать это. Я заменил ваши изображения иконками в демонстрационных целях.

Этот метод просто устанавливает "левую и правую" части на display: inline-block, чтобы разместить их рядом друг с другом, а затем устанавливает float: right на правые части, чтобы разделить их.

Я бы подумал об использовании какой-либо CSS Framework, но это был бы простой способ сделать это с тем, что у вас есть.

Без рамки:

* {
  box-sizing: border-box;
}

.back-to-listing-clinic > div {
  display: inline-block;
}

.right-icons-part {
  float: right;
}

.right-icons-part:after {
  content: " ";
  display: block;
  clear: both;
  height: 0px;
}

.right-icons-part a {
  text-align: center;
  display: inline-block;
}

<script src = "https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class = "back-to-listing-clinic">  
  <div class = "left"> 
    <a> &lt; back </a>
  </div>
  <div class = "right-icons-part">
    <a href = "#"><i class = "fas fa-comment-alt"></i><br />Icon 1</a>
    <a href = "#"><i class = "fas fa-comment"></i><br />Icon 2</a>
    <a href = "#"><i class = "fas fa-comments"></i><br />Icon 3</a>
  </div>
</div>

Супер простой фреймворк Ungrid

@media (min-width: 30em) {
    .row { width: 100%; display: table; table-layout: fixed; }
    .col { display: table-cell; }
}

.right {
  text-align: right;
}

.right-icons-part a {
  display: inline-block;
  text-align: center;
}

<script src = "https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class = "row back-to-listing-clinic">  
  <div class = "col left"> 
    <a> &lt; back </a>
  </div>
  <div class = "col right right-icons-part">
    <a href = "#"><i class = "fas fa-comment-alt"></i><br />Icon 1</a>
    <a href = "#"><i class = "fas fa-comment"></i><br />Icon 2</a>
    <a href = "#"><i class = "fas fa-comments"></i><br />Icon 3</a>
  </div>
</div>

15.03.2018 19:29

Другие вопросы по теме

Как применить преобразование skewY () только к одной стороне элемента <div>?

Почему не работает плавная прокрутка?

Только CSS Accordion Gaps

CSS Grid: высота 50% не работает во втором столбце

Влияет ли добавление множества классов css на элемент на производительность?

Изменить ASP CheckBox с помощью CSS

Дублированный CSS границы

Таблица мобильных адаптивов не работает?

Получить значение радиокнопки с фоновым изображением

Ограничьте ширину границы, чтобы освободить место для метки без использования цвета фона для метки

Css выровнять вправо и влево одновременно

Ответы 1

Другие вопросы по теме

Похожие вопросы