[英]How to make div boxes same height as each other, while aligning list items within
My site consists of 8 divs (green boxes) which contain an image and either 3 or 4 list items. 我的网站包含8个div(绿色框),其中包含一个图像和3或4个列表项。 Each list item contains text only.
每个列表项仅包含文本。 My problem is that the divs (boxes) are not the same height for 2 reasons: (1) One div may contain an additional list item which pushes the other items down... or (2) I have no idea, because even when all 3 green divs in a row have the same amount of list items, they're still not the same height (See bullet #2 below screenshot).
我的问题是,div(框)的高度不相同有两个原因:(1)一个div可能包含一个附加列表项,该列表项将其他项推下...或(2)我不知道,因为即使一行中的所有3个绿色div都具有相同数量的列表项,但它们的高度仍不相同(请参见下面的屏幕快照2)。
I simply need all divs in a row to have the same height no matter the amount of list items or whatever. 我只需要一行中的所有div具有相同的高度,而不管列表项的数量如何。
The demo site is here . 演示站点在这里 。
This screenshot shows the top row of divs, with a blue box identifying the problems. 此屏幕快照显示了div的第一行,并带有一个蓝色框,用于标识问题。
Problem 1: Divs #1 and #2 differ in height because div #2 has an additional list item. 问题1: 1号和2号Divs的高度不同,因为2号div还有一个列表项。
Problem 2: Div #1 and #3 have virtually the same text, yet their divs are not the same height either (close but different). 问题2: Div#1和#3具有几乎相同的文本,但是它们的div高度也不相同(接近但不同)。
Ideally I'd like: 理想情况下,我想要:
Here is what I'd like it to look like (red text changed to green for visibility: 这是我想要的样子(红色文本更改为绿色以提高可见性:
Here is a div's HTML: 这是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>
and it's CSS: 这是CSS:
Green Box 绿盒
.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;*/
}
Red Line of Text: 红线文字:
.redbox{margin-top: -2%; margin-bottom:-5%; color:red; font-weight:bold;}
Top Line of Text 文字的第一行
.titlebox{margin-bottom:20%;}
Bottom 2 Lines of Text 文本的底部2行
.features li{
padding:25px 0;
width: 100%;
}
and the container the holds the list items with the div: 容器中包含div列表项:
.features{
list-style-type: none;
background: #A1F997;
text-align: center;
color: #000000;
padding:40px 12%;
font-size: 32px;
font-family: Garamond;
}
Once again you can view my demo site here . 您可以再次在这里查看我的演示站点。 Ideally need solution that works for IE7+ .Thank you all!
理想情况下需要适用于IE7 +的解决方案。谢谢大家!
if you look for lines of block of same height but different height allowed from a line to another , display:flex
or a trick with inline-block
and box-shadow
or even with the use absolute pseudo-elements could do it : 如果您寻找的是同一行但从另一行到另一行允许不同高度的块的行,则
display:flex
或带有inline-block
和box-shadow
的技巧,甚至使用绝对伪元素都可以做到:
inline-block: 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>
or flex: 或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>
these would a possibility via CSS, if all boxes must have same height ( height of the tallest), then javascript will be needed 这些将通过CSS来实现,如果所有盒子的高度必须相同(最高的高度),则需要使用javascript
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.