Как лучше всего сделать этот элемент?

242

12 июля 2017, 22:54

Как лучше всего сделать этот элемент?(выделенный)

Answer 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>

С помощью 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>