在对齐列表项时如何使div框彼此相同的高度

Question

我的网站包含8个div（绿色框），其中包含一个图像和3或4个列表项。 每个列表项仅包含文本。 我的问题是，div（框）的高度不相同有两个原因：（1）一个div可能包含一个附加列表项，该列表项将其他项推下...或（2）我不知道，因为即使一行中的所有3个绿色div都具有相同数量的列表项，但它们的高度仍不相同（请参见下面的屏幕快照2）。

我只需要一行中的所有div具有相同的高度，而不管列表项的数量如何。

演示站点在这里 。

此屏幕快照显示了div的第一行，并带有一个蓝色框，用于标识问题。

• 问题1： 1号和2号Divs的高度不同，因为2号div还有一个列表项。

• 问题2： Div＃1和＃3具有几乎相同的文本，但是它们的div高度也不相同（接近但不同）。

理想情况下，我想要：

1. 要放置在其上方图像上方的红色文本，将其覆盖。
2. 将所有列表项的div与相邻的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;
}

您可以再次在这里查看我的演示站点。 理想情况下需要适用于IE7 +的解决方案。谢谢大家！

Answer 1

如果您寻找的是同一行但从另一行到另一行允许不同高度的块的行，则display:flex或带有inline-block和box-shadow的技巧，甚至使用绝对伪元素都可以做到：

inline-block的：

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

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

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

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

这些将通过CSS来实现，如果所有盒子的高度必须相同（最高的高度），则需要使用javascript