html - 如何使这些 HTML 信息 block 保持相同大小？

Question

我试图使这些信息 block 大小相同，而不管每个信息 block 包含多少个单词。如示例所示，当一个 block 的文本少于另一个 block 时，一个 block 会变小一点，而另一个保持不同的大小。

现在我的问题是，无论其内容或图像如何，如何使这些 block 大小相同？我还将在它们下方使用另一对。

这是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>

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

Answer 1

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

http://jsfiddle.net/VET6x/1/

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

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

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