html - 使最长列之后的所有列的边框高度相等

Question

是否有可能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>

您可以看到 Description 列的右边框正在占用该列的高度。我想为产品名称列做同样的事情。目前的设置有可能吗？

这是关于 jsfiddle 的完整工作演示：这是完整演示：https ://jsfiddle.net/7fb4nzek/

标签： htmlcss

Answer 1

你可以做这样的事情。

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