h1 und p Elemente innerhalb von zwei Inline-Block divs Problem

Question

Ich habe ein Problem mit h1 und p Element in ein paar inline-blocked divs.

Hier ist der Code:

#map-canvas { 
    width: 69%; 
    height: 1000px; 
    display: inline-block; 
} 
#filter-manager{ 
    display: inline-block; 
    width: 30%; 
    height: 1000px; 
    background-color: #000000; 
    margin: 0; 
    padding: 0; 
} 
#filter-manager h1{ 
    font-size: 20px; 
    text-transform: uppercase; 
    color: #fff; 
    margin: 0; 
    padding: 0; 
    display: block; 
} 

<div id="filter-manager"> 
    <h1>Filtri</h1> 
</div><!-- #filter-manager --> 
<div id="map-canvas"></div><!-- #map-canvas --> 

Die divs halten ihre Inline-Status aber #filter-manager geht auf dem Boden, wenn ich ein h1 oder p-Element setzen. Wenn ich nichts hineinlege, sind die divs perfekt ausgerichtet.

Warum h1 und p Elemente verhalten sich so?

Answer 1

Versuchen Sie, die Anzeige des h1 in der CSS-Datei zu ändern. Wenn das nicht funktioniert, versuchen Sie die width:30% und margin:0 Parameter Ihr Problem ist definitiv dort.

Answer 2

In diesem Fall haben Sie 2 Lösungen. Erstens ist dies hinzuzufügen:

#filter-manager { 
     float: left; 
} 

Zweitens ist h1 zu machen table:

#filter-manager h1 { 
    display: table; 
} 

Answer 3

Sie sollten vertical-align hinzufügen: oben in der div mit display: inline-block; Auch Sie nicht Anzeige benötigen: Block in h1 da standardmäßig in h1, h2, h3 etc ..

#map-canvas { 
 
    width: 69%; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background-color:red; 
 
    vertical-align:top 
 
} 
 
#filter-manager{ 
 
    display: inline-block; 
 
    width: 30%; 
 
    height: 100px; 
 
    background-color: #000000; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align:top 
 
} 
 
#filter-manager h1{ 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    margin: 0; 
 
    padding: 0; 
 
    display:block 
 
}

<div id="filter-manager"> 
 
    <h1>Filtri</h1> 
 
</div><!-- #filter-manager --> 
 
<div id="map-canvas"></div><!-- #map-canvas -->