CSS имеют каждый элемент сетки разной высоты

Question

CSS имеют каждый элемент сетки разной высоты

Еще один простой способ понять ... Он работает:

Код HTML:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Код Jquery:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

1

html css css3 alignment css-grid

задан kukkuz 20 March 2019 в 05:46

2 ответа

Другие вопросы по тегам:

html css css3 alignment css-grid

Похожие вопросы:

score 0 · Answer 1

Значение по умолчанию свойства align-items для контейнера сетки равно stretch, что означает, что каждый элемент сетки будет простираться до высоты строки сетки . ] (к самому большому элементу в строке, если высота не установлена с помощью grid-template-rows).

Чтобы изменить это, вы можете просто добавить align-items: flex-start в контейнер сетки (.contentWrapper) - см. Демонстрацию ниже:

body {
  background: #ddd;
}

.contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
  align-items: flex-start; /* ADDED */
}

.contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

.box {
  background: #fff;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}

[111 ]

score 0 · Answer 2

Я решил это, добавив margin-bottom: auto к каждому .contentWrapper .box. Это подтолкнуло текст к изображению и поместил каждую ячейку в соответствии с его содержанием.

.main .contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
}

.main .contentWrapper .box {
  background-color: #eee;
  margin-bottom: auto;
}

.main .contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}

<div class="main">
  <div class="contentWrapper">
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</div>
    </div>
  </div>
</div>

jsFiddle [ 115]