我的网站由8个div(绿色框)组成,其中包含一个图像以及3个或4个列表项。每个列表项仅包含文本。我的问题是div(盒子)的高度不同有两个原因:(1)一个div可能包含一个额外的列表项,它将其他项目推下来......或者(2)我不知道,因为即使连续的所有3个绿色div都有相同数量的列表项,它们的高度仍然不一样(见截图下面的子弹#2)。
我只需要连续所有的div都有相同的高度,无论列表项的数量或其他什么。
演示网站为here。
此屏幕截图显示了div的第一行,其中一个蓝框标识了问题。
问题1: Div#1和#2的高度不同,因为div#2有一个额外的列表 项目
问题2: Div#1和#3几乎有相同的文字,但他们的div是 不一样的高度(接近但不同)。
理想情况下我想:
以下是我想要的样子(红色文字因可见性而变为绿色:
这是div的HTML:
<a href="http:adfadfafl">
<div class="block personal fl">
<!-- CONTENT -->
<div class="content">
<p class="price">
<p class="vignette" style="background-image:url(http://jasoncampbell.net46.net/public/2.jpg)"></p>
</p>
</div>
<!-- /CONTENT -->
<!-- FEATURES -->
<ul class="features">
<li class="redbox">MAKE THIS OVER IMAGE</li>
<li class="titlebox">ldfadfadf </li>
<li>ad ffadfa dfad f</li>
<li>adf adfad </li>
</ul>
</div>
</a>
它是CSS:
绿箱
.block{
width: 30%;
margin: 0 15px;
margin-bottom: 30px;
min-height: 700px;
max-height: 700px;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* border: 1px solid red;*/
}
红线文字:
.redbox{margin-top: -2%; margin-bottom:-5%; color:red; font-weight:bold;}
文字顶部
.titlebox{margin-bottom:20%;}
底部2行文字
.features li{
padding:25px 0;
width: 100%;
}
并且容器包含div的列表项:
.features{
list-style-type: none;
background: #A1F997;
text-align: center;
color: #000000;
padding:40px 12%;
font-size: 32px;
font-family: Garamond;
}
您再次可以查看我的演示网站here。理想情况下需要适用于IE7 +的解决方案。谢谢大家!
答案 0 :(得分:1)
如果您查找相同高度但不同高度的块的行,从一行到另一行,display:flex
或带有inline-block
和box-shadow
的技巧,或者甚至使用绝对伪 - 元素可以做到:
内联块:
body>div {
width:80%;
margin:auto;
overflow:hidden;
text-align:center;
}
a {
display:inline-block;
vertical-align:top;
margin:0 0.5em 0;
width:25%;
background:lightgreen;
box-shadow: 0 50px 0 lightgreen , 0 100px lightgreen , 0 150px lightgreen ;
border-top:1em solid white;
padding:0.5em;}
&#13;
<div>
<a>
<div>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
<p>line</p>
</div>
</a>
</div>
&#13;
或flex:
body>div {
display:flex;
flex-wrap:wrap;
width:80%;
margin:auto;
justify-content:center;
}
a {
margin:0.5em 1%;
width:27%;
background:lightgreen;
padding:0.5em;}
&#13;
<div>
<a>
<div>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
</div>
</a>
<a>
<div>
<p>line</p>
<p>line</p>
<p>line</p>
</div>
</a>
</div>
&#13;
如果所有盒子必须具有相同的高度(最高的高度),那么这些可能会通过CSS,然后需要javascript