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

时间:2014-02-18 00:39:17

标签: html css web

我试图使这些信息块的大小相同,而不管每个信息的数量。如示例所示,当一个块的文本少于另一个块时,一个块变小,另一个块的大小不同。

现在我的问题是,无论内容或图像如何,我如何实现这些块的大小相同?我也将在他们下方使用另一对。

Blocks aren't equal for some reason

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

我在这里做错了什么?

4 个答案:

答案 0 :(得分: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 }

如果是我,我会找到一些避免静电高度的细胞。

答案 1 :(得分:0)

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

您的代码的其他一些事情。不鼓励使用HTML居中<img>,而是使用css。此外,<br>标签在哪里,为什么有些关闭但有些不是?

答案 2 :(得分:0)

也许您可以使用display:table;display:table-row;display:table-cell;。这样,你的div就像表格的列一样。他们将保持在同一高度。

看看这个jsfiddle

答案 3 :(得分:0)

这是一个可能适合您的解决方案:

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