Javascript 如何匹配两个div的高度

解决方案：我发现解决问题的最简单方法是添加渐变背景

.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;
}

---

您可以使用flexbox进行此操作，请参见

我已经对你的代码做了修改，你可以自己看

.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%);}

---

可以使用jquery执行此操作：

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;
}

您也可以使用以下方法来完成此操作： 在代码中包含cdn

// 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");
});

插件默认选择高度最大的元素，但您可以通过选择选项target来选择目标，如下所示：

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

---

共享CSS也请使用适当的语法调整您的帖子。就目前情况而言，很难弄清楚你想做什么。使用flex box它会自动对高度均匀的行进行排序将css添加到原始帖子，以及问题的照片中，flex无法使用我的代码你的小提琴无法使用检查更多数据你是对的，我忘记了一些额外的flex和通用css。我已经在我的答案中更改了url，或者你现在可以在这里查看，左边的一个没有相同的宽度，名称比送货地址大，这弄乱了整个表格我也为你更改了这个，看这对你来说够好了吗，还是还缺少什么？它正在处理fiddle，但它仍然会弄乱网站上的表格，idk why Thank虽然这也是一个可行的选择，但请记住，如果您考虑性能，这不是理想的方法。这是我发现的最简单的解决方法，所以你们中的任何人都可以帮助我了解如何选择较大的高度而不是较小的高度one@EhteshAmAlIi插件应自动选择高度较大的元素，但我已经编辑了我的答案，以展示如何使用插件选择目标元素：也请参阅此处查看其他选项：是的，我尝试了这个插件，它的工作原理与我给出的相同，它选择较小的高度并匹配该高度，我的较小高度为44 px，较大的高度为70 px，但第一列两侧都有44 px，所以idk，如果它使用第一个column@EhteshAmAlIi我做了一个密码笔，告诉我这是不是你要找的

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

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

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

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