Question

我正在尝试使用css创建一个字段集，其中图例居中！我有两个问题第一个是框大小根据其内容更改但我想保持所有字段集的相同大小，无论内容是否更大是否来自其他人？

第二个问题是：我试图在图例的上半部分添加一个句柄，使它看起来像一个公文包。这对普通皮肤很有用，但在较小的皮肤中，这个句柄从原点移开。如何解决这个问题，使手柄变得敏感，不要在较小的皮肤中移位？以下是问题的DEMO。

手柄：

.handle {
  position: absolute;
  top: -28px;
  left: 50%;
  border: 12px solid rgba(77, 53, 33, 1);
  border-bottom: 0 none;
  width: 48px;
  height: 28px;
  margin-left: -30px;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}

Answer 1

这将解决您的句柄问题。

.handle {
  top: -45px;
}

@media screen and (min-width: 768px) {
  .handle {
    top: -28px;
   }
}

这将解决你的身高问题。

@media screen and (min-width: 768px) {
  .inner-child {
    min-height: 300px;
  }
}

Answer 2

第二个问题可以解决设置＆＃34; top：auto＆＃34;并使用＆＃34; margin-top：-46px＆＃34;

向上移动句柄

.handle {
 position: absolute;
 top: auto;
 margin-top:-46px;
 left: 50%;
 border: 12px solid rgba(77, 53, 33, 1);
 border-bottom: 0 none;
 width: 48px;
 height: 28px;
 margin-left: -30px;
 -webkit-border-radius: 10px 10px 0 0;
 -moz-border-radius: 10px 10px 0 0;
 border-radius: 10px 10px 0 0;
}

为了增加盒子之间的垂直间隙，你可以从底部增加到70px或更多的边距。

.feature .inner-child{ 
   ...
   margin: 15px 0 70px 0;
}

第一个问题可以通过Jquery计算更高的块来解决，并为所有其他框设置相同的高度。您可以创建一个迭代，找到＆＃34; .inner-child＆＃34;的最大高度。元素并将此高度设置为all。

jQuery(document).ready(function(){        
     var maxHeight = 0;

     $(".inner-child").each(function(key, value){ //Create a iteration of all .inner-child elements
        maxHeight = Math.max($(value).height(), maxHeight); //find the height of higher box
     });

    $(".inner-child").css("height", maxHeight); //Set height

  });

我创建了此解决方案的DEMO。

响应问题的困难

2 个答案: