2

Есть сетка bootstrap 4 с 4 колонками. Как сделать так, чтобы контент внутри (покрашен с желтый цвет) при любом количестве содержимого был одинаковой высоты? Для самих колонок есть отличное решение:

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Но, есть 2 проблемки: 1 - внутри содержится ссылка, которая не flex; 2 - нужна обводка вокруг контента, НО без обводки самой картинки. Вот здесь у меня затык и я не знаю как решить.

Код:

.row {
  margin-top: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.row>[class*='col-'] {
  display: flex;
  flex-direction: column;
  border: 1px solid green;
  padding: 10px;
}

.task-box {
  background-color: yellow;
}

.task-box-inner {
  border: 2px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
  <div class="col-3 mb-5">
    <a class="task-box" href="javascript:void(0);">
      <img class="img-fluid" src="http://via.placeholder.com/350x150">
      <div class="task-box-inner">
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <div class="hour">posted 15 hours ago</div>
      </div>
    </a>
  </div>
  <div class="col-3 mb-5">
    <a class="task-box" href="javascript:void(0);">
      <img class="img-fluid" src="http://via.placeholder.com/350x150">
      <div class="task-box-inner">
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        <div class="hour">posted 15 hours ago</div>

      </div>
    </a>
  </div>
  <div class="col-3 mb-5">
    <a class="task-box" href="javascript:void(0);">
      <img class="img-fluid" src="http://via.placeholder.com/350x150">
      <div class="task-box-inner">
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
        <div class="hour">posted 15 hours ago</div>
      </div>
    </a>
  </div>
  <div class="col-3 mb-5">
    <a class="task-box" href="javascript:void(0);">
      <img class="img-fluid" src="http://via.placeholder.com/350x150">
      <div class="task-box-inner">
        <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</h4>
        <div class="hour">posted 15 hours ago</div>

      </div>
    </a>
  </div>
</div>

2
  • можете добавить троеточие в конец текста :)
    – Randall
    Commented 11 мая 2018 в 13:26
  • @Избыток сусликов давайте серьезнее
    – Вася
    Commented 11 мая 2018 в 13:41

1 ответ 1

1

Если серьёзно то вот так:

.row {
  margin-top: 20px;
  display: flex;
}
.row > [class*='col-'] {
	 display: flex;
	 flex-direction: column;
   border: 1px solid green;
   padding: 10px;
   align-items: stretch;
}
.task-box {
   background-color: yellow;  
   display: flex;
   flex-direction: column;
   align-items: stretch;
   height: 100%;
}
.task-box-inner {
   border:2px solid blue;
   height: 100%;
}
<div class="row no-gutters">
          <div class="col-3 mb-5">
            <a class="task-box" href="javascript:void(0);">
              <img class="img-fluid" src="http://via.placeholder.com/350x150">
			  <div class="task-box-inner">
				  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
				  <div class="hour">posted 15 hours ago</div>
			  </div>
            </a>
          </div>
          <div class="col-3 mb-5">
            <a class="task-box" href="javascript:void(0);">
              <img class="img-fluid" src="http://via.placeholder.com/350x150">
			  <div class="task-box-inner">
				  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
				  <div class="hour">posted 15 hours ago</div>

			  </div>
            </a>
          </div>
          <div class="col-3 mb-5">
            <a class="task-box" href="javascript:void(0);">
              <img class="img-fluid" src="http://via.placeholder.com/350x150">
			  <div class="task-box-inner">
				  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
				  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
				  <div class="hour">posted 15 hours ago</div>
			  </div>
            </a>
          </div>
          <div class="col-3 mb-5">
            <a class="task-box" href="javascript:void(0);">
              <img class="img-fluid" src="http://via.placeholder.com/350x150">
			  <div class="task-box-inner">
				  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
				  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
				  minim veniam, quis nostrud</h4>
				  <div class="hour">posted 15 hours ago</div>

			  </div>
            </a>
</div></div>

JSFiddle

9
  • спасибо, но обратите внимание про проблемки, которые я указывал в описании (ведь стили у меня 1 в 1 с вашими) есть 2 проблемки: 1 - внутри содержится ссылка, которая не flex; 2 - нужна обводка вокруг контента, НО без обводки самой картинки. Вот здесь у меня затык и я не знаю как решить.
    – Вася
    Commented 11 мая 2018 в 13:50
  • А зачем вам в a куча блочных элементов, вы же в курсе что так нельзя?
    – Zicrael
    Commented 11 мая 2018 в 13:54
  • поясните. а как можно? (я просто в стилях доп прописываю для ссылки тоже блочность) ну, заменю spanами, что принципиально изменится? Если это поможет решить задачу, то ок, но как?
    – Вася
    Commented 11 мая 2018 в 14:16
  • нет не поможет, если вы хотите сделать что б при клике на один из col была ссылка то я покажу как если нужно, просто скажите.
    – Zicrael
    Commented 11 мая 2018 в 14:18
  • 1
    Вам нужно что - то типа такого? jsfiddle.net/pxy2h2hg/2
    – Zicrael
    Commented 11 мая 2018 в 15:06

Ваш ответ

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

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