如何使这些HTML信息块保持相同的大小？

我试图使这些信息块大小相同，而不考虑每个信息块包含的字数。如示例中所示，当一个块的文本比另一个块的文本少时，一个块会变小，而另一个块的大小会不同

现在我的问题是，如何实现这些块大小相同，而不管其内容或图像如何？我还打算在它们的正下方使用另一对

以下是CSS代码：

 /***********All containers**************/
   .bottomContainers{
position: absolute;
margin-left: 0%;

display: inline-box;
  }

 /**********Small Containers*************/
  .container{
    max-width: 30%;
    max-height: 30%;
    margin-top:5%;
    margin-bottom: 5%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
 }

以下是HTML代码：

    <div class="bottomContainers" role="moreInfo">
     <!--Small Inner Containers for Information-->
     <div class="container" id="firstContainer">
          <br />
          <center><img src="img/map.png"></center>
          <br>
          <article>
             Some random text is in this block, It doesnt size like the next one
          </article>
     </div>
     <div class="container" id="firstContainer">
        <br />
        <center><img src="img/money.png"></center>
        <br>
        this is another block which also doesnt scale to the other block regardless of text inside of it
     </div>

此块中有一些随机文本，其大小与下一个不一样




这是另一个块，它也不会缩放到另一个块，而不管其中的文本如何

---

我在这里可能做错了什么？

这是一个快速修复方法，但在对象上设置明确的高度将使它们都具有相同的高度。这需要一些玩的最佳大小等，但它会解决你的问题。我很好奇专业人士如何解决这个问题

---

你的代码还有其他一些东西。不鼓励使用HTML将

居中，请改用css。另外，

标记在哪里？为什么有些是封闭的，而有些不是封闭的？

在这个解决方案中，我正在大量重构您的原始代码。如果这是一个静态宽度的网站，那么拥有静态宽度单元格将不会是一个问题。如果您希望此解决方案具有响应性，您将遇到很多问题：

我使用absolute定位了图像及其对应的文本。这同样适用于静态布局，一旦它响应，就会出现问题

<div class="bottomContainers">

    <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>
        <div>
            Some random text is in this block, It doesnt size like the next one
        </div>
     </div>

     <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>     
        <div>
            This is another block which also doesnt scale to the other block regardless of text inside of it
        </div>
     </div>

</div>

.bottomContainers { overflow:hidden; }

.container { 
    width:200px;
    height:200px;

    float:left;
    position:relative;

    margin:5% 5%;
    padding:2%;

    background-color: #ecf0f1;
    color: grey;

    border-radius: 5px;
    border-bottom: 2px solid grey;
 }

.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }

此块中有一些随机文本，其大小与下一个不一样
这是另一个块，它也不会缩放到另一个块，而不管其中的文本如何
.bottomContainers{溢出：隐藏；}
.容器{
宽度：200px；
高度：200px；
浮动：左；
位置：相对位置；
利润率：5%5%；
填充：2%；
背景色：#ecf0f1；
颜色：灰色；
边界半径：5px；
底边：2倍纯色灰色；
}
.container>div{位置：绝对；底部：10px；}
.container>div:first-child{position:absolute；top:10px}

---

如果是我，我会想办法避免静态高度单元格。

也许你可以使用

display:table，
显示：表格行和
显示：表格单元格。这样，您的div将充当表的列。它们将保持在同一高度

看看这个
 以下是一个可能适合您的解决方案：


我把你的密码改了一点。使用
center
标记是不可取的，而且看起来
br
标记用于间隔，这可以通过边距来完成。最后，我给了
.container
一个指定的高度，主要的缺点是如果窗口的大小过小，溢出的文本将被隐藏

HTML:

你是对的，我现在尝试使用完整的css作为中心，而不是像中心标记那样使用普通的OLHTML。至于
标记，我不知道，我使用它们，因为它们在需要划分的范围内进行了划分。我觉得它们很有用，但如果这意味着要使用css来实现这一点，我会继续研究。事实上，我的网站响应迅速，整个页面与平板电脑、移动浏览器和桌面兼容。还有一件事，在JSFIDLE中，这些块处于垂直位置，我希望它们处于水平线上。也许我应该删除这个答案。在一个响应性很强的布局中，它不会很好地工作。我如何在水平位置进行呢？是的，在JSFIDLE中，块处于垂直位置，我试图为这两个块设置一个水平位置。增加和减少浏览器和JSFIDLE单元格的宽度。在某个时刻，.container元素溢出其父元素，因此它们最终被包装。
 <div class="bottomContainers" role="moreInfo">
     <div class="container" id="firstContainer">
        <img src="http://www.placehold.it/100x100">
        <p>
          Some random text is in this block, It doesnt size like the next one
        </p>
     </div>
     <div class="container" id="firstContainer">
       <img src="http://www.placehold.it/100x100">
       <p>
         this is another block which also doesnt scale to the other block regardless of text inside of it
       </p>
     </div>
 </div>   

 .container{
    // your current styles here

    overflow: hidden;
    height: 200px;
    display: block;
    float: left;
 }

.container img {
    display: block;
    margin: 10px auto 0px;
}