等宽度+高度响应div与悬停覆盖 [英] Equal width + height responsive divs with hover overlay

问题描述

我无法让我的div的高度匹配。我需要它们将div的高度与最多的内容相匹配 - 这通常很容易，但是我使用也包含更多文本的叠加层来完成此操作。我无法用固定的高度或宽度来做，因为我需要布局响应。细胞需要基本上是col-md-2，并且文字环绕的高度最高，它更像是一个正方形，col-sm-6会长而窄，col-xs-12也会很长，狭窄。

它不一定是bootstrap ，但它需要有这种效果。另一个问题是，我需要尽可能多地进行内联操作，因为我将它交付给客户端以粘贴到他们的drupal站点，而无需访问后端，因此请忽略我的内联代码。

我几乎可以得到它，叠加工作，并且高度由内容决定，但我无法达到最高的匹配长度。任何人都可以看到我在这里做错了吗？

#table {} =truedata-babel =false>

< head>< link rel =stylesheet href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>< / head>< body>< div id =tablestyle =宽度：100％> < div class =td col-md-12style =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-12style =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;>要了解更多关于制作此工具包的信息，请点击此处< div class =overlay text>测试这个< / div> < / DIV> < div class =td col-md-2 col-sm-6 col-xs-12style =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;>要了解更多关于制作此工具包的信息< div class =overlay text>测试这个< / div> < / DIV> < div class =td col-md-2 col-sm-6 col-xs-12style =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;>要了解更多关于制作这个工具包的信息，请点击这里toolkit，点击这里< div class =overlay text>测试这个< / div> < / DIV> < div class =td col-md-2 col-sm-6 col-xs-12style =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;>要了解更多关于制作这个工具包的信息，请点击这里< div class =overlay text>测试这个< / div> < / DIV> < div class =td col-md-2 col-sm-6 col-xs-12style =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;>要了解更多关于制作这个工具包的信息，请点击这里< div class =overlay text>测试这个< / div> < / DIV> < div class =clear-all> < / DIV> < / div>< / body>

解决方案

对不起，我很忙，这里有一个工作的例子：
$ b

<$ c $我们需要迭代行子元素$（'。row'）。each（function（）{//设置一个var来存储最高高度var maxHeight = 0; //然后，我们遍历所有的cols $（'。col-xs-4'，this）.each（function（）{if（$（this）.height（）> maxHeight）{maxHeight = $（this） 。（）.height（）;}}）; //现在，我们有最高的高度值，所以我们可以将这个高度应用到所有的行子元素。$（'。col-xs-4'，this）.each函数（）{$（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 =stylesheethref =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为H.文字< / p为H. < p为H.文字< / p为H. < p为H.文字< / p为H. < / DIV> < div class =col-xs-4> < p为H.文字< / p为H. < p为H.文字< / p为H. < p为H.文字< / p为H. < p为H.文字< / p为H. < p为H.文字< / p为H. < p为H.文字< / p为H. < / DIV> < div class =col-xs-4> < p为H.文字< / p为H. < p为H.文字< / p为H. < p为H.文字< / p为H. < p为H.文字< / p为H. < / DIV> < / div>< / div>

I'm having trouble getting the heights on my divs to match up. I need them to match the heights of the div with the most content - which is normally easy BUT I'm doing this with overlays that also contain more text. I can't do it with fixed heights or widths because I need the layout to be responsive. The cells need to basically be col-md-2 with the tallest height as the text wraps, it would be more like a square, col-sm-6 would be long and narrow, and col-xs-12 would also be long and narrow.

It doesn't HAVE to be bootstrap, but it needs to have that effect. The other kicker is that I need to do as much of this inline as possible, because I'm delivering it to a client to paste into their drupal site without having much access to the backend, so please ignore my gross inline code.

I've almost got it, the overlays work, and the heights are being determined by the content, but I just can't get the heights to match up to the longest one. Can anyone see what I'm doing wrong here??

#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>

解决方案

Sorry i was busy, here's a working example:

//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>

这篇关于等宽度+高度响应div与悬停覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！