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

Мой сайт состоит из 8 элементов div (зеленые прямоугольники), которые содержат изображение и 3 или 4 элемента списка. Каждый элемент списка содержит только текст. Моя проблема в том, что div (ящики) имеют разную высоту по двум причинам: (1) один div может содержать дополнительный элемент списка, который толкает другие элементы вниз... или (2) я понятия не имею, потому что даже когда все 3 зеленых элемента div подряд имеют одинаковое количество элементов списка, но они все еще не одинаковой высоты (см. маркер № 2 ниже на снимке экрана).

Мне просто нужно, чтобы все элементы div в строке имели одинаковую высоту независимо от количества элементов списка или чего-то еще.

Демонстрационный сайт находится здесь.

На этом снимке экрана показан верхний ряд элементов div с синей рамкой, обозначающей проблемы.

проблема

Проблема 1. Разделы №1 и №2 различаются по высоте, потому что у блока №2 есть дополнительный элемент списка.
Проблема 2: Div #1 и #3 имеют практически одинаковый текст, но их div'ы также имеют разную высоту (близкие, но разные).

В идеале я хотел бы:

Красный текст, который будет помещен поверх изображения над ним, накладываясь на него.
Выровняйте все элементы списка с div по вертикали с соседними div.

Вот как я хотел бы, чтобы это выглядело (красный текст изменился на зеленый для видимости:

solution

Вот HTML-код div:

    <a href="http:adfadfafl">

             <div class="block personal fl">

                <!-- CONTENT -->
                <div class="content">
                    <p class="price">
    <p class="vignette" style="background-image:url(http://jasoncampbell.net46.net/public/2.jpg)"></p>
                    </p>

                </div>
                <!-- /CONTENT -->
                <!-- FEATURES -->
                <ul class="features">
                <li class="redbox">MAKE THIS OVER IMAGE</li>
                <li class="titlebox">ldfadfadf </li>
                <li>ad ffadfa dfad f</li>
                <li>adf adfad </li>
                  </ul>

            </div>

      </a>

и это CSS:

Зеленая рамка

.block{
    width: 30%;    
    margin: 0 15px;
    margin-bottom: 30px;
    min-height: 700px;
    max-height: 700px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
/*    border: 1px solid red;*/
}

Красная строка текста:

.redbox{margin-top: -2%; margin-bottom:-5%; color:red; font-weight:bold;}

Верхняя строка текста

.titlebox{margin-bottom:20%;}

Нижние 2 строки текста

.features li{
    padding:25px 0;
    width: 100%;
}

и контейнер содержит элементы списка с div:

.features{
    list-style-type: none;    
    background: #A1F997;
    text-align: center;
    color: #000000;
    padding:40px 12%;
    font-size: 32px;
    font-family: Garamond;
}

Еще раз вы можете просмотреть мой демонстрационный сайт здесь. В идеале нужно решение, которое работает для IE7+. Всем спасибо!

Nova 19.02.2015 источник

comment

Используйте height вместо min-height и max-height в коде CSS. - Aradmey 20.02.2015

comment

Готовы ли вы использовать JS? Я создал библиотеку под названием AlignJS, которая очень помогает мне в работе, когда у меня возникает эта проблема. github.com/jacksonv1lle/AlignJS - Jackson 20.02.2015

comment

не могли бы вы создать очищенный codepen, jsfiddle или даже фрагмент кода, как для вашей демонстрации, которую можно легко обновить - G-Cyrillus 20.02.2015

comment

Я включил jsfiddle ниже, однако по какой-то причине высота зеленого div в этой скрипке одинакова. Я включил все 3 скрипта в текстовую область JS, возможно, это неправильный способ. Почему мой демо-сайт в моем вопросе не показывает даже высоты? Вот jsfiddle: jsfiddle.net/02e0uhrx - Nova 20.02.2015

comment

Вам нужно установить высоту для всех элементов, которые должны иметь точную высоту. - cli 20.02.2015

comment

@Aradmey, ты говоришь мне изменить это на .block? Например, .block{ ширина: 30%; поле: 0 15px; нижняя граница: 30px; высота: 700 пикселей; .... потому что это ничего не меняет - Nova 20.02.2015

comment

@cli, можете ли вы привести пример с использованием моего кода? Я смущен тем, что вы имеете в виду - Nova 20.02.2015

comment

@nova, хорошо для скрипки, я переделываю базовый пример во фрагменте кода в ответе ниже, для этого не используется js. 2 случая - G-Cyrillus 20.02.2015

comment

Я создал эту скрипку с вашего демонстрационного сайта: jsfiddle.net/vmLo9fe8 В этой скрипке нет разницы в высоте. . Как сделать текст поверх изображения? Вы устанавливаете style="background-image:url(http://jasoncampbell.net46.net/public/2.jpg)" в свой текст (class = redbox). Поскольку в скрипке нет разницы в высоте, это должен быть какой-то JavaScript или что-то еще, изменяющее эту высоту. - cli 20.02.2015

Ответы (1)

arrow_upward
1
arrow_downward

если вы ищете строки блока одинаковой высоты, но разной высоты, разрешенной от строки к другой, display:flex или трюк с inline-block и box-shadow или даже с использованием абсолютных псевдоэлементов может сделать это:

встроенный блок:

body>div {
  width:80%;
  margin:auto;
  overflow:hidden;
  text-align:center;
}
a {
  display:inline-block;
  vertical-align:top;
  margin:0 0.5em 0;
  width:25%;
  background:lightgreen;
  box-shadow: 0 50px 0 lightgreen , 0 100px lightgreen  , 0 150px lightgreen ;
  border-top:1em solid white;
  padding:0.5em;}

<div>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
      <p>line</p>
    </div>
  </a>
</div>

или флекс:

body>div {
  display:flex;
  flex-wrap:wrap;
  width:80%;
  margin:auto;
  justify-content:center;
}
a {
  margin:0.5em 1%;
  width:27%;
  background:lightgreen;
  padding:0.5em;}

<div>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
    </div>
  </a>
  <a>
    <div> 
      <p>line</p>
      <p>line</p>
      <p>line</p>
    </div>
  </a>
</div>

это возможно через CSS, если все ящики должны иметь одинаковую высоту (высота самого высокого), тогда потребуется javascript

G-Cyrillus 19.02.2015

comment

Только ящики в ОДНОЙ строке должны иметь ОДИНАКОВУЮ высоту. Решение также должно работать для IE7+, поэтому я думаю, что FlexWrap не будет работать. Ваш первый фрагмент кода может сработать, я скоро попробую! Спасибо - Nova; 20.02.2015

comment

Хорошо, я применил ваш код, и все выглядит хорошо, за исключением того, что вторая строка переходит в первую строку. Div #4 должен появиться непосредственно под Div #1 с небольшим промежутком между строками. Вот демо codepen, пожалуйста, помогите! codepen.io/anon/pen/qEoJKE - Nova; 20.02.2015

comment

@Nova, вы можете продолжать использовать тень блока и фильтровать последний тип с помощью nth-child и заставить блоки стоять слева codepen.io/gc-nomade/pen/gbeNao - G-Cyrillus; 21.02.2015

comment

Спасибо, похоже, это работает, за исключением того, что когда я добавляю больше div, проблема повторяется ниже. Проверьте это: jasoncampbell.net46.net/public/index_main2.html - Nova; 21.02.2015

comment

Подождите .. Если я отредактирую codepen, то при добавлении большего количества div проблем не будет. Почему возникла проблема на моем демонстрационном сайте? Вот обновленный CodePen codepen.io/anon/pen/VYXoYd, а вот скриншот, показывающий проблема на моем сервере jasoncampbell.net46.net/public/screenshot1.png Спасибо! - Nova; 21.02.2015

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

Ответы (1)

Вопросы по теме