Как выровнять элемент в элементе div, чтобы он был равномерным по всем другим подряд? - PullRequest
Новая
       34

Как выровнять элемент в элементе div, чтобы он был равномерным по всем другим подряд?

0 голосов
/ 23 октября 2018

Мне трудно выровнять три контейнера значков, представленных в строке.Я попробовал комбинацию flex-end и baseline, но они не сработали ни для тегов img, ни для тегов h3 внутри контейнера.Вот что у меня есть в коде, а также jsfiddle :

Редактировать: я хочу выровнять изображение по нижней части div, чтобы содержимое было ровным.Я помню, как делал это раньше с flexbox, забыл, как это было сделано.Это был какой-то вариант использования свойств, которые я уже пробовал, но, возможно, я использую их неправильно?Не совсем уверен! 

.icons {
  display: inline-flex;
}
.icons img {
  vertical-align: baseline;
  align-self: flex-end;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
}
.icons h3 {
  vertical-align: baseline;
  align-self: baseline;
  align-content: baseline;
  align-items: baseline;
  justify-content: baseline;
  flex-direction: column;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="container">
  <div class="icons">
    <div class="col-md-4">
      <div class="icon">
        <img src="https://via.placeholder.com/88x131"/>
        <h3>Header 1</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <img src="https://via.placeholder.com/116x98"/>
        <h3>Header 2</h3>
        <span>Lorem ipsum dolor sit amet</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <img src="https://via.placeholder.com/107x116"/>
        <h3>Header 3</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitl Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

https://jsfiddle.net/DTcHh/95598/

Вы можете обернуть изображения в div и назначить div-классам (myImg): 

.icons {
  display: flex;
}

.myImg {
  height: 140px;
  display: flex;
  align-items: flex-end;
}
<div class="container">
  <div class="icons">
    <div class="col-md-4">
      <div class="icon">
        <div class="myImg">
        <img src="https://via.placeholder.com/88x131"/>
        </div>
        <h3>Header 1</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <div class="myImg">
        <img src="https://via.placeholder.com/116x98"/>
        </div>
        <h3>Header 2</h3>
        <span>Lorem ipsum dolor sit amet</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <div class="myImg">
         <img src="https://via.placeholder.com/107x116"/>
        </div>
        <h3>Header 3</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitl Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
  </div>
</div>

, затем используйте min-height , вы также можете установить изображения divs min-width, если вам нужны изображения одинаковой высоты (они изменяют размерПодумайте об этом, подумайте об использовании подгонки объекта: обложка или, что еще лучше, задайте изображения в качестве фона, а затем используйте background-size: cover;)

0 голосов
/ 23 октября 2018

Вы можете использовать класс row в начальной загрузке, чтобы поместить изображения в отдельный ряд.(Вероятно, нужно настроить, чтобы добавить некоторые классы col-sm, но это может помочь вам начать) 

.icons img {
    vertical-align: baseline;
    align-self: flex-end;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
}
.icons h3 {
    vertical-align: baseline;
    align-self: baseline;
    align-content: baseline;
    align-items: baseline;
    justify-content: baseline;
    flex-direction: column;
}

.bottom-align {
    height: 150px;
}

.bottom-align img {
    position: absolute;
    bottom:0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
  <div class="icons">
    <div class="row">
      <div class="col-md-4 bottom-align">
        <img src="https://via.placeholder.com/88x131">
      </div>
      <div class="col-md-4 bottom-align">
        <img src="https://via.placeholder.com/116x98">
      </div>
      <div class="col-md-4 bottom-align">
        <img src="https://via.placeholder.com/107x116">
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
      <div class="icon">
        <h3>Header 1</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <h3>Header 2</h3>
        <span>Lorem ipsum dolor sit amet</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="icon">
        <h3>Header 3</h3>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitl Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
      </div>
    </div>
    </div>
  </div>
</div>
...