0

Как лучше всего сделать этот элемент?(выделенный)введите сюда описание изображениявведите сюда описание изображения

4
  • 1
    а что именно у вас не получается?
    – Cheg
    11 июл 2017 в 15:39
  • я 4 картинки(те ,которыевокруг стула) поставил на свои места а вот ка к ним текст приделать не понимаю(
    – LEV
    11 июл 2017 в 15:43
  • добавил фото для примера
    – LEV
    11 июл 2017 в 15:45
  • 1
    Добавьте в вопрос код так, чтобы было видно что у вас уже сделано
    – Cheg
    11 июл 2017 в 15:47

1 ответ 1

2
  1. С помощью float

    .block {
        overflow: auto;
        width: 232px;
    }
    .block-body {
        float: left;
        width: 170px;
    }
    .block-title {
        margin-bottom: 6px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .block-icon {
        float: left;
        width: 50px;
        height: 50px;
        background-color: red;
        margin-left: 12px;
    }
    <div class="block">
      <div class="block-body">
        <div class="block-title">Название блока</div>
        <div class="block-description">Описание данного блока</div>
      </div>
      <div class="block-icon"></div>
    </div>

  2. С помощью flexbox

    .block {
        display: flex;
        width: 232px;
    }
    .block-body {
        width: 170px;
    }
    .block-title {
        margin-bottom: 6px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .block-icon {
        width: 50px;
        height: 50px;
        background-color: red;
        margin-left: 12px;
    }
    <div class="block">
      <div class="block-body">
        <div class="block-title">Название блока</div>
        <div class="block-description">Описание данного блока</div>
      </div>
      <div class="block-icon"></div>
    </div>

1
  • Спасибо,очень выручили!
    – LEV
    11 июл 2017 в 16:15

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