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

Question

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

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

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

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

Answer 2

这是一种可能适合您的解决方案：

Demo Fiddle

我稍微修改了你的代码。使用center 标签是不受欢迎的，而且看起来br 标签是为了间距，这可以通过边距来完成。我最终给了.container 一个指定的高度，主要的缺点是如果窗口的尺寸太小，溢出的文本将被隐藏。

HTML：

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

CSS：

 .container{
    // your current styles here

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

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

Answer 3

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

您的代码的其他一些内容。不鼓励使用 HTML 将 <img> 居中，而是使用 css。另外，<br> 标签在哪里？为什么有些是关闭的，有些不是？

Answer 4

也许您可以使用display:table;、display:table-row; 和display:table-cell;。这样，您的 div 将像表格的列一样。它们将保持相同的高度。

看看这个jsfiddle！