我试图使这些信息块的大小相同,而不管每个信息的数量。如示例所示,当一个块的文本少于另一个块时,一个块变小,另一个块的大小不同。
现在我的问题是,无论内容或图像如何,我如何实现这些块的大小相同?我也将在他们下方使用另一对。
这是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>
我在这里做错了什么?
答案 0 :(得分: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;
}