부모 div 내에 텍스트가있는 이미지가 인라인으로 표시되지 않습니다.

Question

텍스트와 로고가 포함 된 상위 div가 있습니다. 이 두 요소는 같은 줄에있는 서로의 옆에 나타납니다.

이미지와 부모 컨테이너를 모두 표시하도록 코드를 추가하고 이미지를 포함 할만큼 폭이 넓고 높이가 크도록 코드를 추가해도 이미지가 텍스트 아래로 축소됩니다.

HTML :

<div class="heading"><h1>Stanford Connection</h1><img src="tree-logo.gif" alt="Stanford Logo" id="logo"/></div> 

CSS :

.heading { 
width: 800px; 
background-color: #9A0000; 
color: white; 
font-size: 20pt; 
float: left; 
overflow: hidden; 
display: inline-block; 
} 

#logo { 
float:left; 
display: inline-block; 
} 

Answer 1

문제는 당신이 진정으로 왼쪽 모두 요소를 떴다하지 않은 것입니다. 당신은 왼쪽에 .heading 및 #logo을 떠 있지만, 요소 형제해야 떴다했습니다. 따라서, .heading는 형제 요소의 왼쪽에 떠 것이고, h1 전혀 float 설정되어 있지 않습니다. 정확히이 이미지를 원하는 위치에 따라하는 것이 앉을 것을

.heading { 
 
    width: 800px; 
 
    background-color: #9A0000; 
 
    color: white; 
 
    font-size: 20pt; 
 
    float: left; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 

 
h1, #logo { 
 
    float: left; 
 
}

<div class="heading"> 
 
    <h1>Stanford Connection</h1><img src="http://placehold.it/100" alt="Stanford Logo" id="logo" /></div>

참고 :

이미지를 정렬하려면, 당신이해야 할뿐만 아니라 왼쪽으로 h1을 떠입니다 display: inline-block가 더 적합 할 수 있습니다.

희망이 도움이됩니다. :)