Question

我的网站由8个div（绿色框）组成，其中包含一个图像以及3个或4个列表项。每个列表项仅包含文本。我的问题是div（盒子）的高度不同有两个原因：（1）一个div可能包含一个额外的列表项，它将其他项目推下来......或者（2）我不知道，因为即使连续的所有3个绿色div都有相同数量的列表项，它们的高度仍然不一样（见截图下面的子弹＃2）。

我只需要连续所有的div都有相同的高度，无论列表项的数量或其他什么。

演示网站为here。

此屏幕截图显示了div的第一行，其中一个蓝框标识了问题。

problem

问题1： Div＃1和＃2的高度不同，因为div＃2有一个额外的列表项目
问题2： Div＃1和＃3几乎有相同的文字，但他们的div是不一样的高度（接近但不同）。

理想情况下我想：

红色文字放在上面的图像上方，覆盖它。
将所有列表项目与相邻的div垂直对齐。

以下是我想要的样子（红色文字因可见性而变为绿色：

solution

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

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

内联块：

＆＃13;

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：

＆＃13;

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

如何使div框彼此相同，同时对齐列表项

1 个答案: