inline-Block bewegend anderen Inline-Block nach unten und vertical-align: top nicht

Question

Arbeits

Ich habe zwei Inline-Blockelemente (ein <img> Element und ein <div> Element) und das <div> Element treibt das <img> Element nach unten etwa so: image of issue

Hier ist der relevante Code in CSS:

#audio-section #audio-links li img { 
    width: 46%; 
    margin-right: 80%; 
    height: 100%; 
    margin: 5% 78% 2% 4%; 
    display: inline-block; 
    vertical-align: top; 
} 

#audio-section #audio-links li #responsive-audio-text { 
    display: inline-block; 
    width: 45%; 
    margin: 100px 0px 0 400px; 
    float: right; 
} 

und HTML (mit <img> innerhalb <a> Tag):

<section id="audio-section"> 
      <ul id="audio-links"> 
       <li> 
        <div id="responsive-audio-text"> 
         <h6>AuraPlus[+]</h6> 
         <p>Mixed by:<br> 
          Composed by:<br> 
          Tracks:<br> 
         </p> 
        </div> 
        <a href="https://soundcloud.com/rapfavs/sets/coloringbook" target="_blank"><img src="http://images.complex.com/complex/image/upload/t_article_image/chance-the-rapper-coloring-book-cover_gpzfqr.jpg" alt="DO LATERRR"></a> 
       </li> 
      </ul> 

Auch hier ist die aktualisierte jsfiddle: https://jsfiddle.net/30go7uvz/6/

HINWEIS: Ich recherchiert diese und versucht vertical-align: top (wie dies eine gemeinsame Antwort auf die gleiche Frage und einige andere Fragen war). Dies hat jedoch nicht funktioniert. Vielleicht habe ich es falsch benutzt, oder es gibt einen anderen Grund dafür, dass es nicht funktioniert? Darüber hinaus behebt das Anwenden von position: absolute auf den Text das Problem, aber dies ist nicht durchführbar, da es beim Scrollen über der Kopfzeile angezeigt wird. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Passen Sie Ihre Marge Eigenschaften:

#audio-section #audio-links li img { 
    width: 46%; 
    height: 100%; 
    margin: 5% 0 2% 4%; 
    display: inline-block; 
    vertical-align: top; 
} 

#audio-section #audio-links li #responsive-audio-text { 
    display: inline-block; 
    width: 45%; 
    margin: 100px 0px 0 0; 
    float: right; 
} 

Wie haben Sie es, die Ränder neben den Inline-Block-Elemente viel Raum zwingen, vor allem für die div. Sie haben einen Rand von 400 px links davon .... das heißt, sie passen nicht auf dieselbe visuelle Reihe. Durch Korrektur der Ränder stimmen sie wie erwartet überein.

fiddle update