Inline-Block-div-Elemente passen nicht wie erwartet an

Ich habe HTML und CSS, die Inline-Blockelemente (divs) erstellen, die auf einer Zielseite zu finden sind. Sie scheinen jedoch nur dann vertikal ausgerichtet zu sein, wenn sie einen Inhalt (eine ungeordnete Liste) innerhalb der divs enthalten. Wenn im div kein Inhalt vorhanden ist, wird das Element heruntergedrückt. Hier ist ein jsfiddle. Hier ist der Code. Kann jemand erklären, warum der dritte Div-Block nicht vertikal ausgerichtet ist?Inline-Block-div-Elemente passen nicht wie erwartet an

EDIT: Während ich bequem bin, dass die „reparieren“, um dieses Problem, dass jedes div, um sicherzustellen, verwendet „vertical-align: top“ im Styling, ich bin immer noch ein wenig wie zu verwirrt, warum Ich bin verpflichtet, dieses Styling in erster Linie zu verwenden. Ich würde denken, dass die div-Elemente immer gleich ausgerichtet sind, unabhängig vom Inhalt innerhalb der divs.

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

Quelle

2013-07-16 Ken

hinzufügen vertical-align: top; zu .landing-block Klasse

Quelle

2013-07-16 15:21:51

Inline-Blockelemente sind standardmäßig vertical-align:baseline;. Ändern Sie dies in vertical-align:top;

.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; 
     vertical-align:top; /* add this rule */ 

    }

Quelle

2013-07-16 15:22:22 koningdavid

Danke, das war eine einfache Lösung! Allerdings bin ich immer noch ein wenig verwirrt darüber, was den dritten Block dazu bringt, sich so zu bewegen. Warum scheint die "Grundlinie" die Unterseite des inneren Inhalts der div zu sein und nicht die Unterseite der div selbst? – Ken

@Ken Das 3. div ist eigentlich an der Grundlinie, die inneren zwei Linien an den anderen 2 Elementen "schiebt" die divs 2 Zeilen nach oben – koningdavid

-3

hinzufügen float: left

.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; 
float: left;

}

jsfiddle

Quelle

2013-07-16 15:27:29

Warum würde ich einen Schwimmer brauchen: links, wenn ich bereits Inline-Blöcke habe, die innen platziert werden können eine Linie. – Gherman

Set vertical-align: top für die .landing-block Klassendeklaration in Ihrem CSS.

Quelle

2013-07-16 15:32:31 ponysmith

Inline-Block-div-Elemente passen nicht wie erwartet an

Antwort

Verwandte Themen