Question

我正在努力应对我正在开展的项目中的挑战。

我希望所有按钮的高度相同。在大屏幕上他们都很好。但是，当我开始缩小规模时，他们开始达到不同的高度。这是预期的结果。

但是在这个页面上拉动弦乐的人希望所有按钮都是相同的高度。当一个文本进入下一行并使按钮变大时，每个按钮大多数都达到相同的高度。

这适用于视口的所有宽度。

我希望你能帮助我应对这一挑战。如有任何更多信息，我会尽快更新问题。

PS。我不想为此使用CSS3，因为它希望尽可能保持向后兼容性。

因为我必须在这里添加代码，这就是我的html的情况。

DELETE test1
PUT test1
{
  "settings": {
    "analysis": {
      "tokenizer": {
        "pipe_tokenizer": {
          "type": "pattern",
          "pattern": "\\|"
        }
      },
      "analyzer": {
        "pipe_analyzer": {
          "type": "custom",
          "tokenizer": "pipe_tokenizer"
        }
      }
    }
  },
  "mappings": {
    "mytype": {
      "properties": {
        "text": {
          "type": "string",
          "analyzer": "pipe_analyzer"
        }
      }
    }
  }
}

POST /test1/mytype/1
{"text":"36-3031.00|36-3021.00"}

GET /test1/_analyze
{"field":"text","text":"36-3031.00|36-3021.00"}

Answer 1

Flexbox 可能是您更轻松的解决方案，我发现了一篇试图解决您所遇问题的文章。

查看此文章：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

<强>代码：

.row {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.button-primary {
    background-color: #005f96;
    color: white;
    font-size: 20px;
    margin: 2%;
    display:flex-item;
    width: 21%;
}

<强>演示：

https://jsfiddle.net/x2cqqcz7/

<强>附加：

我已经删除了按钮周围的包装div，您也可能会使用媒体查询。

Answer 2

这是我为类似项目编写的基本jQuery代码：

 var eqheight = 0; 
 $('.col-eqheight-sm').each(function() {
     if( $(this).outerHeight() > eqheight) {
        eqheight = $(this).height();
     }
  });
  $('.col-eqheight-sm').height(eqheight);

循环遍历每个孩子并相应地更新高度。

P.S建议如果您只想为特定分辨率工作，请将其包装在视口宽度检查器中。此外，如果希望每次视口更改时都要更新窗口大小调整侦听器，请添加它。

保持多个元素相同的高度和verticalu对齐

2 个答案: