Ho alcuni HTML e CSS che creano elementi di blocco in linea (div) che si possono trovare in una pagina di destinazione. Tuttavia, sembrano essere allineati verticalmente solo quando contengono alcuni contenuti (una lista non ordinata) all'interno dei div. Se non ci sono contenuti nel div, l'elemento viene premuto. Ecco uno jsfiddle. Ecco il codice. Qualcuno può spiegare perché il terzo blocco div non è allineato verticalmente?Gli elementi div inline-block non si allineano come previsto
EDIT: Mentre io sono comodo che il "fix" per questo problema è quello di garantire che ogni div utilizza "vertical-align: top" nello styling, io sono ancora un po 'perplesso sul motivo per cui Sono obbligato a usare questo stile in primo luogo. Penserei che gli elementi div si allineano sempre in modo uniforme, indipendentemente dal contenuto all'interno delle div.
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.header {
padding: 10px;
background-color: red;
border-bottom: 1px solid #aaaaaa;
color: #ffffff;
}
a:hover {
text-decoration:underline;
}
h1 > a {
color: #ffffff;
}
h1 > a:hover {
color:#ffffff;
}
li > a {
color: #000000;
}
li > a:hover {
color: #000000;
}
</style>
</head>
<body>
<div>
<div class='landing-block'>
<h1 style='background-color: #3991db;'>
<a href='#'>COMPANIES</a>
</h1>
<ul>
<li><a href='#'>Search Companies</a></li>
<li><a href='#'>New Company</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #9139db;'>
<a href='#'>PEOPLE</a>
</h1>
<ul>
<li><a href='#'>Search People</a></li>
<li><a href='#'>New Person</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #c2db39;'>
<a href='#'>Products</a>
</h1>
</div>
<div>
</body>
</html>
Grazie, è stata una soluzione facile! Tuttavia, sono ancora un po 'confuso su ciò che effettivamente spinge il terzo blocco verso il basso in quel modo. Perché la "linea di base" sembra essere il fondo del contenuto interno del div e non il fondo del div stesso? – Ken
@Ken Il 3 ° div è in realtà sulla linea di base, le due linee interne sugli altri 2 elementi "spingono" le div 2 righe su – koningdavid