Question

我正在使用带有Woocommerce插件的WordPress创建网站。我需要在产品类别布局（网格布局）中显示产品页面，产品标题和产品简短描述。

我的问题是产品行高不相等。因此，产品不会在我的网站中显示为一行。作为一种解决方案，我想逐行划分产品网格布局。

这样的事情： http://prnt.sc/ezw0t4

示例网页网址： http://kitchengallery.lk/all-products/commercial-kitchen-equipments/

如果你们有任何想法，请告诉我。谢谢！

Answer 1

解决方案1：FLEXBOX

使用 flexbox模型可以完成这项工作。参考以下代码。

等高栏 - Codepen

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
	box-sizing: border-box; 
}

html, body  { 
	height: 100%;
	width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

h1 {
  font-size: 150%;
}

p {
  margin-bottom: 10px;
}

.paddingBlock {
	padding: 20px 0;
}

.eqWrap {
	display: flex;
}

.eq {
	padding: 10px;
}

.eq:nth-of-type(odd) {
	background: yellow;
}

.eq:nth-of-type(even) {
	background: lightblue;
}

.equalHW {
	flex: 1;
}

.equalHMWrap {
	justify-content: space-between;
}

.equalHM {
	width: 32%;
}

.equalHMRWrap {
	justify-content: space-between;
	flex-wrap: wrap;
}

.equalHMR {
	width: 32%;
	margin-bottom: 2%;
}

.equalHMVWrap {
	flex-wrap: wrap;
}

.equalHMV {
	width: 32%;
	margin: 1%;	
}

.equalHMV:nth-of-type(3n) {
	margin-right: 0;	
}

.equalHMV:nth-of-type(3n+1) {
	margin-left: 0;	
}

<div class="paddingBlock">
  <h1>EQUAL HEIGHT COLUMNS</h1>
  <p>Simply add display:flex to the parent</p>
  <div class="equalHWrap eqWrap">
    <div class="equalH eq">boo <br> boo</div>
    <div class="equalH eq">shoo</div>
    <div class="equalH eq">clue</div>
  </div>
</div>            

<div class="paddingBlock">
  <h1>EQUAL HEIGHT + WIDTH COLUMNS</h1>
  <p>Add display:flex to the parent and flex:1 to the boxes</p>
  <div class="equalHWrap eqWrap">
    <div class="equalHW eq">boo <br> boo</div>
    <div class="equalHW eq">shoo</div>
    <div class="equalHW eq">clue</div>
  </div>
</div>            

<div class="paddingBlock">
  <h1>EQUAL HEIGHT + WIDTH COLUMNS WITH MARGINS</h1>
  <p>Add display:flex, justify-content: space-between; to the parent and give a width to the boxes that totals to less than 100%. E.g. These boxes have a width of 32% each. The remaining width of 4% (i.e. 32 x 3 = 96%) will be used to create the space between the boxes and simulate margins. No need to remove margins on the first and last child!</p>
  <div class="equalHMWrap eqWrap">
    <div class="equalHM eq">boo <br> boo</div>
    <div class="equalHM eq">shoo</div>
    <div class="equalHM eq">clue</div>
  </div>
</div>

<div class="paddingBlock">
  <h1>EQUAL HEIGHT COLUMNS WITH MARGINS IN MULTIPLE ROWS</h1>
  <p>Building on the above example, just give bottom margins to the boxes. Add a flex-wrap: wrap to the parent, so that boxes go to the next line when they run out of space in a 'row'.</p>
  <div class="equalHMRWrap eqWrap">
    <div class="equalHMR eq">boo</div>
    <div class="equalHMR eq">shoo</div>
    <div class="equalHMR eq">clue</div>
    <div class="equalHMR eq">boo <br> boo </div>
    <div class="equalHMR eq">shoo</div>
    <div class="equalHMR eq">clue</div>
  </div>
</div>

<div class="paddingBlock">
  <h1>EQUAL HEIGHT COLUMNS WITH MARGINS IN MULTIPLE ROWS and VARIABLE NO OF BOXES</h1>
  <p>Add display:flex, flex-wrap: wrap to the parent and give a width to the boxes. Give margins to the boxes and remove the left and right margins of the first and last box in each 'row' using the nth-of-type selector. Unlike the previous example, justify-content: space-between on the parent does not work for an uneven number of boxes, because if there are five boxes in all, the third and fifth will align to the left and right of the perceived 'row'.</p>
  <div class="equalHMVWrap eqWrap">
    <div class="equalHMV eq">boo <br> boo</div>
    <div class="equalHMV eq">shoo</div>
    <div class="equalHMV eq">clue</div>
    <div class="equalHMV eq">boo <br> boo </div>
    <div class="equalHMV eq">clue</div>
  </div>
</div>

解决方案2：JAVASCRIPT

如果浏览器支持对您来说是一个问题，那么我建议您使用JavaScript或jQuery循环遍历所有列，而不是使用flexbox，找到最大高度的列该行然后将其应用于该行中的所有列。

这样的事情：

function relPostHeight(){
    var imgheightArray = [],
        headheightArray = [];
    $("#related-posts .row .col-sm-3").each(function(){
        var imgheight = $(this).find('.featured-image img').height();
        var headheight = $(this).find('.entry-header').height();
        imgheightArray.push(imgheight);
        headheightArray.push(headheight);
    });
    var minimageHeight = Math.max.apply(Math, imgheightArray);
    var minheadHeight = Math.max.apply(Math, headheightArray);
    $("#related-posts .featured-image").css({'min-height': minimageHeight});
    $("#related-posts .entry-header").css({'min-height': minheadHeight});
}

relPostHeight();
$(window).on('resize', relPostHeight);

Wordpress Woocommerce产品网格等于行高

1 个答案: