html - 如何使 div 框彼此高度相同，同时在其中对齐列表项

Question

我的网站由 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 是高度也不一样(接近但不同)。

理想情况下我想要:

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

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

Answer 1

如果你寻找相同高度但不同高度允许从一行到另一行的 block 行，display:flex 或使用 inline-block 和 box-shadow 甚至使用绝对伪元素也可以做到:

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