<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;
}
解决方案:我找到解决问题的最简单方法是添加渐变背景
.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来做到这一点:
// 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
});
});
您可以使用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;
}