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

时间:2015-02-19 21:05:43

标签: html css list divider

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

理想情况下我想:

  1. 红色文字放在上面的图像上方,覆盖它。
  2. 将所有列表项目与相邻的div垂直对齐。
  3. 以下是我想要的样子(红色文字因可见性而变为绿色:

    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 +的解决方案。谢谢大家!

1 个答案:

答案 0 :(得分:1)

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

内联块:

&#13;
&#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;
&#13;
&#13;

或flex:

&#13;
&#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;
&#13;
&#13;

如果所有盒子必须具有相同的高度(最高的高度),那么这些可能会通过CSS,然后需要javascript