如何讓這些HTML塊的信息保持相同的大小？

我試圖讓這些塊的信息大小相同，無論每個人擁有多少字。如示例所示，當一個塊的文本比另一個塊的文本更少時，其中一個塊會變小一點，另一個保持不同的大小。如何讓這些HTML塊的信息保持相同的大小？

現在我的問題是，我如何實現讓這些塊的大小相同而不管其內容或圖像如何？我也會在他們的正下方使用另一對。

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>

什麼我可能做錯了嗎？

來源

2014-02-18 DwellingNYC

的可能重複[CSS - 展開子DIV高度父母的身高（http://stackoverflow.com/questions/4804581/css- expand-child-div-height-to-parents-height） – 2014-02-18 00:55:00

這裏是一個解決方案，它可以爲你工作：

Demo Fiddle

我改變了你的代碼位。使用center標籤是令人不悅的，它看起來像br標籤有間距，這可以用margin來完成。我最終給了.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; 
}

來源

2014-02-18 01:40:13 badAdviceGuy

這是一個快速解決方案，但在對象上設置明確的高度將使它們都具有相同的高度。這需要一些人玩最好的尺寸，但它會解決你的問題。我很好奇專業人員如何解決這個問題。

您的代碼的其他一些事情。不鼓勵使用HTML居中<img>，而是使用css。此外，<br>標籤在哪裏以及爲什麼有些關閉，但有些不是？

來源

2014-02-18 00:59:54 lordflapjack

你說得對，我正在嘗試使用完整的css來進行居中，而不是使用普通的html像中心標記。至於
標籤，我不知道，我使用它們，因爲它們在需要劃分的內容中休息。我覺得它們很有用，但如果它意味着使用css來做到這一點，我會繼續前進並研究它。 – DwellingNYC

我在這個解決方案中重構了原始代碼。如果這是一個靜態寬度的網站，那麼具有靜態寬度的單元格不會成爲問題。如果您希望這個解決方案來響應你將有很多問題與它：

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 }

如果是我，我會找到一些方法來避免靜態高度細胞。

來源

2014-02-18 01:07:17 Lowkase

其實，我的網站是響應式的，整個頁面與平板電腦，手機瀏覽器和桌面兼容。還有一件事，在JSFiddle塊是在垂直位置，我最希望他們在水平線。 – DwellingNYC

也許我應該刪除這個答案。它在響應式佈局中效果不佳。 – Lowkase

我將如何進入水平位置？ – DwellingNYC

也許你可以使用display:table;,display:table-row;和display:table-cell;。這樣，你的div就像表格的列一樣。他們將保持在同一個高度。

看看這個jsfiddle！

來源

2014-02-18 01:31:32 morgul

如何讓這些HTML塊的信息保持相同的大小？

回答

相關問題