是否可以使最长的borders-right高度相等？
这是我到目前为止所拥有的
.mk-product-holder {
position: relative;
}
.woocommerce .mk-product-holder {
z-index: 10;
}
.mk-product-loop.compact-layout .mk-product-holder {
border: 1px solid #e3e3e3;
background-color: #fff;
}
#responsive-form {
max-width: 100%;
margin: 0 auto;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.clearfix::after, .clearfix::before {
content: " ";
display: table;
}
div {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-size: 100%;
}
.master-holder div {
box-sizing: border-box;
}
.form-row {
width: 100%;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.column-four {
min-height: 330px;
width: 25%;
float: left;
position: relative;
padding: 0rem;
}
.column-full {
float: left;
position: relative;
padding: 0rem;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-size: 100%;
}<article class="item mk--col mk--col--12-12 post-1228 product type-product status-publish has-post-thumbnail product_cat-plugs first instock shipping-taxable product-type-simple item--loaded" style="position: absolute;backface-visibility: hidden;left: 0px;">
<div class="mk-product-holder">
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-four" style="border-right: 1px solid #d8d8d8; padding-left: 10px; padding-right: 10px;width:250px;">
<div class="column-full">
<div class="borderbottom">
<br>
<h2 class="producttitle">Product Name</h2>
</div>
</div>
<div class="column-full">
<div class="greybg">
<br>
<img width="152" height="135" src="https://via.placeholder.com/150" class="attachment-full size-full wp-post-image" alt="" itemprop="image"><br>
</div>
</div>
</div>
<div class="column-four" style="width:250px;border-right: 1px solid #d8d8d8; padding-left: 10px; padding-right: 10px;">
<div class="column-full">
<div class="borderbottom">
<h2 class="producttitle" style="font-size: 20px!important;border-bottom: 1px solid #d8d8d8; padding-bottom: 20px;">
<br>
<strong>Description</strong></h2>
<p>
Some very long text <br>
Some very long text <br>
Some very long text <br>
Some very long text <br>
Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
您可以看到“描述”列的右边框占据了该列的高度。我要对“产品名称”列进行相同的设置。使用当前设置可以吗？
这是jsfiddle上的完整工作演示： 以下是完整的演示：https://jsfiddle.net/7fb4nzek/
答案 0 :(得分：3)
您可以做这样的事情。
.mk-product-holder {
position: relative;
}
.woocommerce .mk-product-holder {
z-index: 10;
}
.mk-product-loop.compact-layout .mk-product-holder {
border: 1px solid #e3e3e3;
background-color: #fff;
}
#responsive-form {
max-width: 100%;
margin: 0 auto;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.clearfix::after, .clearfix::before {
content: " ";
display: table;
}
div {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-size: 100%;
}
.master-holder div {
box-sizing: border-box;
}
.form-row {
width: 100%;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.column-four {
min-height: 330px;
width: 25%;
float: left;
position: relative;
padding: 0rem;
}
.column-full {
float: left;
position: relative;
padding: 0rem;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-size: 100%;
}<article class="item mk--col mk--col--12-12 post-1228 product type-product status-publish has-post-thumbnail product_cat-plugs first instock shipping-taxable product-type-simple item--loaded" style="position: absolute;backface-visibility: hidden;left: 0px;">
<div class="mk-product-holder">
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-four" style="padding-left: 10px; padding-right: 10px;width:250px;">
<div class="column-full">
<div class="borderbottom">
<br>
<h2 class="producttitle">Product Name</h2>
</div>
</div>
<div class="column-full">
<div class="greybg">
<br>
<img width="152" height="135" src="https://via.placeholder.com/150" class="attachment-full size-full wp-post-image" alt="" itemprop="image"><br>
</div>
</div>
</div>
<div class="column-four" style="width:250px;border-right: 1px solid #d8d8d8; border-left: 1px solid #d8d8d8; padding-left: 10px; padding-right: 10px;">
<div class="column-full">
<div class="borderbottom">
<h2 class="producttitle" style="font-size: 20px!important;border-bottom: 1px solid #d8d8d8; padding-bottom: 20px;">
<br>
<strong>Description</strong></h2>
<p>
Some very long text <br>
Some very long text <br>
Some very long text <br>
Some very long text <br>
Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text <br>Some very long text
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</article>