如何匹配2个div的高度

问题描述 投票:-6回答:2
<div class="order-summary">
  <ul>
     <li class="li-summary"><div class="summary-left">Name:</div><div class="summary-right">Ehtesham Ali</div></li>
     <li class="li-summary"><div class="summary-left">Delivery Address:</div><div class="summary-right">House 1, Street 1</div></li>              
  </ul>
</div>

summary-left和summary-right的高度为100%:我想要summary-right来匹配summary-left的高度。

摘要左侧有背景颜色,摘要右侧没有。 li-summary有一个border-bottom。因此,当摘要权限转到2行时,摘要右侧的背景颜色不会填充100%

.order-summary{
  width: 60%;
  border: 1px solid #cccccc;
  margin: 80px auto;
  font-family: 'Lato','Open Sans','Helvetica Neue','Arial','San-serif';
  text-align: left;
  border-bottom:0;
}
.summary-left{
  width: 25%;
  float: left;
  height: 100%;
  background: #fbfbfb;
  padding: 10px;
}
.summary-right{
  overflow: hidden;
  padding: 10px 0 10px 15px;
  height: 100%;
  border-left: 1px solid #cccccc;
}
.li-summary{
  border-bottom: 1px solid #cccccc;
}

Image of the Issue

解决方案:我找到解决问题的最简单方法是添加渐变背景

.li-summary{
    background-image: linear-gradient(left, #fbfbfb, #fbfbfb 25%, transparent 25%, transparent 100%);
background-image: -webkit-linear-gradient(left, #fbfbfb, #fbfbfb 25%, transparent 25%, transparent 100%);}
javascript html css
2个回答
0
投票

你可以使用jquery来做到这一点:

// get height of left summary and set right summary to the same on page load
var summaryLeftHeight = $(".summary-left").height();
$(".summary-right").css("height", summaryLeftHeight + "px");

// add this to make sure they have the same height on page resize 
$(window).on("resize", function(){
   var summaryLeftHeight = $(".summary-left").height();
   $(".summary-right").css("height", summaryLeftHeight + "px");
});

您也可以使用http://brm.io/jquery-match-height/执行此操作:在您的代码中包含cdn

<script src="jquery.matchHeight.js" type="text/javascript"></script>

更新了HTML(我为每个要高度相同的元素添加了class =“summary”):

<div class="order-summary">
  <ul>
     <li class="li-summary">
        <div class="summary summary-left">Name:</div>
        <div class="summary summary-right">Ehtesham Ali</div>
     </li>
     <li class="li-summary">
        <div class="summary summary-left">Delivery Address:</div>
        <div class="summary summary-right">House 1, Street 1</div>
     </li>              
  </ul>
</div>

并初始化js文件或脚本标记中的代码

$(function() {
    $('.summary').matchHeight();
});

默认情况下,插件选择具有最大高度的元素,但您可以通过选择目标选择目标,如下所示:

$(function() {
    $('.summary').matchHeight({
        target: $('.summary-left') // using summary left as the target 
    });
});

0
投票

您可以使用flexbox来查看Set height of CSS flex elements to the same amount?

我用你的代码制作了一个jsfiddle,你可以自己看看。

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

li{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}
© www.soinside.com 2019 - 2024. All rights reserved.