0

CSS:

.dish_1 {
    text-align: left;
}

.dish_2 {
    text-align: center;
}

.dish_3 {
    text-align: right;
}

HTML:

<div class="dish_all">
            <div class="dish_1">
            <img src="images/dish_1.png">
            <br>
            <a>КТО</a>
            </br>
            </div>
            <div class="dish_2">
            <img src="images/dish_2.png">
            <br>
            <a>КТО</a>
            </br>
            </div>
            <div class="dish_3">
            <img src="images/dish_3.png">
            <br>
            <a>КТО</a>
            </br>
            </div>
    </div>

Результат:
введите сюда описание изображения

1
  • 1
    Либо добавить float: left, либо через флексбокс, либо через display: inline-block
    – entithat
    17 дек 2020 в 15:21

2 ответа 2

2

display: flex:

.dish_all {
  display: flex;
  justify-content: space-between;
}
<div class="dish_all">
  <div class="dish_1">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_2">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_3">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
</div>

float: left:

.dish_all>div {
  float: left;
  margin: 0 10px;
}
<div class="dish_all">
  <div class="dish_1">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_2">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
  <div class="dish_3">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
</div>

display: inline-block:

.dish_all > div {
  display: inline-block;
  margin: 0 10px;
  text-align: left;
}

.dish_all {
  text-align: center;
}
<div class="dish_all">
  <div class="dish_1">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div><!--
  --><div class="dish_2">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div><!--
  --><div class="dish_3">
    <img src="https://via.placeholder.com/150">
    <br>
    <a>КТО</a>
    <br>
  </div>
</div>

0
.dish_all {
  display: flex;
  justify-content: space-between;
}
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.