Bordi HTML non della stessa lunghezza

Ho questo elenco di saloni e ognuno ha un bordo tratteggiato sul lato destro. Alcuni di questi confini si fermano davanti agli altri, c'è un modo per renderli tutti della stessa lunghezza? (Idealmente in modo che raggiungano il piè di pagina) Tutti i saloni sono in questo HTML (l'informazione è solo diverso):Bordi HTML non della stessa lunghezza

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

e il CSS è la seguente:

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

This is a photo of the issue

fonte

2013-12-18 user3095683

È necessario impostare un'altezza fissa o '100%'. –

Direi avere un'altezza fissa. Anche @JoshPowell funzionerà al 100%? – Ruddy

ho aggiunto altezza: 100%; nel mio css ma non ha risolto il problema purtroppo – user3095683

Il la ragione per cui questo sta accadendo è perché alcune delle altezze delle scatole sono inferiori alle più alte. Per risolvere questo problema, aggiungi solo un'altezza fissa a tutti i div nel css. Per esempio:

height:200px;

fonte

2013-12-18 14:34:13 tjboswell

Va bene è necessario dare è genitore di una dimensione fissa, di quella più lunga, e quindi aggiungere height: 100%; ai bambini.

.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

fonte

2013-12-18 14:34:57

grazie! puoi spiegare cosa è un genitore? scusa molto nuovo a tutto questo! – user3095683

Non c'è bisogno di essere dispiaciuto! Un genitore è un elemento html che contiene altri tag. Il nome della classe non ha bisogno di essere genitore, ciò che fa è il 'parent' contiene la classe' .salons' che quindi sono figli di quel genitore. Poiché il genitore ha quegli stili, i bambini possono ora ereditare ciò che il 100% sarebbe del genitore. Senza un genitore il 100% non funzionerebbe poiché non c'è nulla da confrontare al 100% a. –

@ user3095683 Ho creato questo violino per mostrarti come l'altezza al 100% funziona con il suo genitore. In questo http://jsfiddle.net/5xtB4/ il 'div' non ha genitore con gli stili, quindi l'altezza al 100% non fa nulla. In questo http: // jsfiddle.net/5xtB4/1/I ha aggiunto altezza e larghezza per essere 100% su 'html, body' che contengono quel' div'. Ora puoi vedere come 'div' sta ereditando la dimensione dei suoi genitori. Spero che questo aiuti, se questa è stata la risposta, puoi sempre contrassegnarla come risposta accettata. :] –

è perché hanno diversi height (basati su di esso del contenuto) ...
Si può provare a dare un'altezza fissa al .salonsclass
o ...
100 % e un'altezza fissa al contenitore.

fonte

2013-12-18 14:36:12 gmo

è necessario impostare il height, min-height e max-height

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

fonte

2013-12-18 14:36:42 GLES

che non è necessario per risolvere qualsiasi altezza penso solo fare il genitore display:table; e rendere i saloni di classe display:table-cell;

Per verificare come questa cosa funziona prova il seguente dato HTML e 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 }

fonte

2013-12-18 14:50:34

Bordi HTML non della stessa lunghezza

risposta

Problemi correlati