HTML边框长度不一样

Question

我有这个沙龙列表，每个沙龙的右边都有一个虚线边框。其中一些边界在其他边界之前停止，是否有任何方法可以使它们长度相同？ （理想情况下，他们到达页脚） 所有沙龙都在这个HTML中（信息不同）：

<div class="salons">
  <h1><a href="salonpage.php?salonid=1">Urban Bliss</a></h1>
  <p> 15 Headingly Lane,
    LS6 1BL.
    0113 278 1572</p>
</div>

，CSS如下：

.salons {
font-family:"Century Gothic";
width:248.5px;
max-height:inherit;
float:left;
padding-left:5px;
border-right:1px dotted #FFB6D7;
padding-bottom:5px;
}

Answer 1

好的，你需要给它的父母一个固定大小，最长的一个，然后给孩子们添加height: 100%;。

.parent {
    width: 100%;
    height: 190px;
}

.salons{
    font-family:"Century Gothic";
    width:248.5px;
    height:100%;
    float:left; /* the reason the parent needs a fixed height is due to the float */
    padding-left:5px;
    border-right:1px dotted #FFB6D7;
    padding-bottom:5px;
}

JSFIDDLE

Answer 2

发生这种情况的原因是因为某些箱子高度低于最高。要解决此问题，只需为css中的所有div添加固定高度即可。 例如：

height:200px;

Answer 3

这是因为他们有不同的height（基于它的内容）......
您可以尝试为.salons class添加固定的高度 或...
容器的100％和固定高度。

Answer 4

您需要设置height，min-height和max-height

.salons {
  /* other style */
  height: 200px;
  min-height: 200px;
  max-height: 200px;
}

Answer 5

你不需要修改任何高度我认为只需要制作父display:table;并制作班级沙龙display:table-cell;

要检查这件事是如何工作的，请尝试下面给出的HTML和CSS

HTML

<ul>
    <li>1</li>
    <li>2<br />2</li>
    <li>1</li>
    <li>1</li>
</ul>

CSS

ul { display:table; list-style:none; }
ul li { display:table-cell; padding:10px; border-right:1px solid red }