Inline-Block und Bewegung des ersten Kind Div

Ich habe gerade angefangen zu lernen CSS, jetzt in diesem Teil stecken. Was bringt die Markenklasse dazu, nach unten zu gehen, wenn die Informationsklasse inline-blockiert ist? Kommt Information nicht nach Marke, so sollte sie nicht die Markenklasse beeinflussen?Inline-Block und Bewegung des ersten Kind Div

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 34px; 
 
    background-color: #ACDACD; 
 
} 
 
.brand { 
 
    border: 2px solid red; 
 
    height: 34px; 
 
    display: inline-block; 
 
} 
 
.information { 
 
    border: 2px solid blue; 
 
    height: 34px; 
 
    display: inline-block; 
 
}

<div class="header"> 
 
    <div class="brand">AKKJKJKJKJKJFKJDKFJDKJF 
 
    </div> 
 
    <div class="information"> 
 
    </div> 
 
</div> 
 
<div class="mainbody"> 
 

 
</div>

Quelle

2016-06-06 InQusitive

Hier ist eine sehr langwierige Antwort auf diese Anfrage. http://StackOverflow.com/a/9289377/2952405 –

@InQusitive - re meinen Kommentar zu meiner Antwort - guter Punkt:/- das ist, was ich bekomme, um nicht auf den Code zu achten, nur auf die Ergebnisse und voreilige Schlussfolgerungen ! Eine Sache für Sie zu berücksichtigen, ist, wenn Sie Text zu "Informationen" hinzufügen, die sie perfekt ausrichten. –

die vertical-align ment von Text ist standardmäßig baseline. Der Unterschied in der height ist, was es macht. Wenn Sie diese CSS-Regel haben:

vertical-align: top;

Oder was auch immer es perfekt ist, es sieht gut aus. Siehe unten:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 34px; 
 
    background-color: #ACDACD; 
 
} 
 
.brand { 
 
    border: 2px solid red; 
 
    height: 34px; 
 
    display: inline-block; 
 
} 
 
.information { 
 
    border: 2px solid blue; 
 
    height: 34px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div class="header"> 
 
    <div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div> 
 
    <div class="information"></div> 
 
</div> 
 
<div class="mainbody"> 
 

 
</div>

Und nun der Unterschied oder die weiße Linie ist wegen der border, die unter Verwendung von box-sizing: border-box gemacht werden kann.

* { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 34px; 
 
    background-color: #ACDACD; 
 
} 
 
.brand { 
 
    border: 2px solid red; 
 
    height: 34px; 
 
    display: inline-block; 
 
} 
 
.information { 
 
    border: 2px solid blue; 
 
    height: 34px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div class="header"> 
 
    <div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div> 
 
    <div class="information"></div> 
 
</div> 
 
<div class="mainbody"> 
 

 
</div>

Quelle

2016-06-06 17:57:45

Inline-Block und Bewegung des ersten Kind Div

Antwort

Verwandte Themen