Отвечающие элементы div одинаковой ширины и высоты с наложением при наведении

У меня возникли проблемы с тем, чтобы высоты на моих divs совпадали. Мне нужно, чтобы они соответствовали высоте div с наибольшим содержанием, что обычно легко, НО я делаю это с наложениями, которые также содержат больше текста. Я не могу сделать это с фиксированной высотой или шириной, потому что мне нужно, чтобы макет был отзывчивым. Ячейки в основном должны быть col-md-2 с самой высокой высотой по мере обтекания текста, это будет больше похоже на квадрат, col-sm-6 будет длинным и узким, а col-xs-12 также будет длинным и узкий.

Это не обязательно должен быть бутстрап, но он должен иметь такой эффект. Другой кикер заключается в том, что мне нужно сделать как можно больше этого встроенного кода, потому что я доставляю его клиенту для вставки на их сайт drupal, не имея большого доступа к серверной части, поэтому, пожалуйста, игнорируйте мой грубый встроенный код.

У меня почти получилось, оверлеи работают, и высота определяется содержимым, но я просто не могу добиться соответствия высоты самой длинной. Может ли кто-нибудь увидеть, что я делаю неправильно здесь ??

#table{ 
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell;
    vertical-align: top;
    text-align: center;
    height: 100%;
    }
    

.overlay {
  position: absolute;
  vertical-align: middle;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background-image: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png');
  background-position: center top;
  background-size: 500% auto;
  opacity: 1;
  transition: .5s ease;
}

.overlay:hover {
  opacity: 0;
}

.text {
  color: white;
  height: 100%;
  top: 50%;
  left: 50%;
  font-size: 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
}

.text:hover {
  opacity: 0;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
 
}

.cell {
  font-size: 14px;
  
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div id="table" style="width: 100%">
        <div class="td col-md-12" style="background-image: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png');
  background-position: center top;
  background-size: 500% auto;  text-align: center; padding-top: 10%; padding-bottom: 10%">test</div>
    </div>
   
<div id="table">    
   

 
    
        <div class="td col-md-2 col-md-offset-1 col-sm-6 col-xs-12" 
        style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
      
      
      
        <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
        <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
        
       <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
        
       <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
       
        <div class="clear-all">
         </div>

    
</div>
</body>

graphicfixations 08.03.2018 источник

comment

создать массив с помощью jquery, сохраняя все высоты строки, а затем динамически устанавливать фиксированную высоту, равную максимальной. Вы можете повторить это задание для события $(window).resize(), чтобы сохранить отзывчивость. - JoelBonetR 08.03.2018

comment

Можете ли вы объяснить дальше? Я недостаточно знаком с jquery, чтобы знать, как реализовать это предложение. Клиент будет изменять текст внутри div, поэтому я не буду знать фиксированную высоту любого из них в любое время. Также имейте в виду, что у меня нет доступа ни к одному из бэкэнд-файлов, я могу добавить немного css в дизайнере css на drupal-сайте моего клиента, но я не знаю о jquery. Является ли это возможным? - graphicfixations 08.03.2018

comment

если есть плагин к нему, может быть. В любом случае вы должны редактировать общедоступную часть, а не бэкэнд. Всегда сложнее, когда между вами и тем, чего вы хотите достичь, стоит CMS... - JoelBonetR 08.03.2018

comment

я имею в виду прочитать все высоты .md-2, затем выбрать максимальное значение и установить его как фиксированную высоту для всех остальных. Вы можете повторить эту функцию в зависимости от прослушивателя событий, который вы хотите активировать. Вы даже можете использовать обычный javascript, если хотите. - JoelBonetR 08.03.2018

comment

Можете ли вы привести пример? - graphicfixations 08.03.2018

comment

готово :) проверьте ответ и примените к своему проекту, если вам нужно объяснение, скажите мне, и я могу прокомментировать код, но это просто вложенный jQuery .each, поэтому вы можете найти всю информацию в документе jQuery. Надеюсь, поможет - JoelBonetR 08.03.2018

comment

и, пожалуйста, не применяйте стили к атрибуту стиля html, это крайне не рекомендуется - JoelBonetR 08.03.2018

comment

Я знаю, что другой кикер заключается в том, что мне нужно сделать как можно больше этого встроенного кода, потому что я доставляю его клиенту для вставки на их сайт drupal, не имея большого доступа к серверной части, поэтому, пожалуйста, игнорируйте мой грубый встроенный код. - graphicfixations 08.03.2018

comment

это не причина очищать код перед тем, как предоставить его для решения проблемы или, в данном случае, для того, чтобы помочь вам узнать и понять, как вы можете справиться с вашей реальной проблемой, не так ли? - JoelBonetR 08.03.2018

Ответы (2)

arrow_upward
1
arrow_downward

Извините, я был занят, вот рабочий пример:

//we need to iterate through row childs
$('.row').each(function() {
    //Set a var to store the highest height
    var maxHeight = 0;
    //Then, we iterate through all cols inside the row, searching for the highest one.
    $('.col-xs-4', this).each(function() {
        if($(this).height() > maxHeight) {
         maxHeight = $(this).height();  
        }
    });
    //Now, we have the height value of the highest one, so we can apply this height to all row childs.
    $('.col-xs-4', this).each(function() {
        $(this).height(maxHeight); 
     });
});

.col-xs-4{
border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
    <div class="col-xs-4">
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
    <div class="col-xs-4">
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  </div>
</div>

JoelBonetR 08.03.2018

comment

Я попытался добавить, используя это с моей текущей настройкой, чтобы приспособить наложение при наведении, но, похоже, это не работает. Посмотрите, в моем примере блок таблицы подгоняется по высоте, но оверлей не растягивается на всю длину. Я пытался реализовать ваш код, но не думаю, что знаю достаточно о javascript, чтобы сделать это правильно. jsfiddle.net/graphicfixations/0vhsu5ce/30 - graphicfixations; 08.03.2018

comment

во-первых, вы повторяете тег ID в div, ваша IDE должна указать на эту большую ошибку, затем вы используете $('.table'), который является селектором класса, вместо использования $('#table') (селектор id), но это не сработает, потому что нам нужны классы, чтобы справиться с этим. Тогда ваш код слишком аккуратный, переместите свой css в часть css, оставив html чистым, я не могу его правильно прочитать, и у меня глаза кровоточат...: V - JoelBonetR; 08.03.2018

comment

Я знаю, я ненавижу встроенный код, но у клиента нет доступа ни к чему, поэтому мне нужно сделать как можно больше таким образом. Позвольте мне переместить его обратно для этого примера. Я не работаю в IDE, я просто вручную кодирую в jsfiddle. Я полностью остановился на этом. подожди. - graphicfixations; 09.03.2018

comment

Хорошо, код очищен и разделен, и я исправил проблему с тегами ID. Не могли бы вы взглянуть сейчас? Я обещаю, больше никаких глазных кровотечений. jsfiddle.net/graphicfixations/0vhsu5ce/70 - graphicfixations; 09.03.2018

comment

Это великолепно! Есть ли способ правильно центрировать текст, используя это исправление? - graphicfixations; 09.03.2018

comment

Я думаю, что есть проблема с отзывчивостью этого - когда я уменьшаю ширину экрана, а затем снова увеличиваю его, поля не изменяются в соответствии с содержимым, а текст обрезается... - graphicfixations; 09.03.2018

comment

вам нужно активировать его при изменении размера окна, позвольте мне - JoelBonetR; 09.03.2018

comment

jsfiddle.net/0vhsu5ce/81 . отредактировано. Да, вы можете запустить его, чтобы получить текстовый центр, но вам нужно будет пересчитать его по-другому. Чтобы получить текст по центру, вы можете использовать чистый CSS. И, пожалуйста, отметьте его как решенный, исправьте свой проект и, если вам нужно, добавьте еще один вопрос о центрировании текста с помощью CSS. Удачи в ваших проектах! :) - JoelBonetR; 09.03.2018

comment

Спасибо большое! Это сработало, я разобрался со всеми деталями с размерами, и это идеально! - graphicfixations; 09.03.2018

comment

Хорошо, отметьте ответ как решение, чтобы другие пользователи могли его быстро найти. - JoelBonetR; 09.03.2018

arrow_upward
0
arrow_downward

Для этого мы можем использовать свойство flex-box, для получения более подробной информации см. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

для демонстрационной практики посетите https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/введите здесь описание ссылки

Kavinrajsi 09.03.2018

comment

как объяснил @graphicfixations, это CMS, где у вас плохой доступ к коду сам по себе, и обычно редактирование шаблонов не является хорошим вариантом, потому что, когда он получает обновление, он перезаписывает ваши моды, и вам приходится делать это снова и снова. снова ищем изменения, чтобы не сломать его. - JoelBonetR; 09.03.2018

Отвечающие элементы div одинаковой ширины и высоты с наложением при наведении

Ответы (2)

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