HTMLの枠線は同じ長さではありません

Question

私はこのサロンのリストを持っており、それぞれ右側に点線の境界線があります。これらの国境のいくつかは他の国より先に止まります。同じ長さにする方法はありますか？

<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

すべてのサロンは、このHTML（情報が異なるだけである）である（理想的にので、彼らはフッターに達します）この理由は、箱の高さの一部が最も高いものよりも低いためです。これを修正するには、cssのすべてのdivに固定高さを追加します。たとえば ：

は

height:200px; 

Answer 2

わかりました、あなたはそれが最長の一つで、固定サイズの親の与え、その後、子どもたちに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 3

彼らは（それの内容に基づいて）異なるheightを持っているので、それはあなたが.salonsclass
か...
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 }