인라인 블록이 제대로 작동하지 않습니까?

Question

옆에 컨테이너가있는 이미지가 있는데 올바르게 정렬하는 데 문제가 있습니다. 나는 웹 사이트의 나머지 부분에서 inline-block을 사용했고 그것에 문제가 없었다.

아무도 내가 이것을 고칠 수 있다면, 놀라운 일이 될 것입니다.

.talentcontainer { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
} 
 
.talentimg { 
 
    width: 250px; 
 
    height: 280px; 
 
    max-width: 80%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    /* future proofing */ 
 
    -khtml-border-radius: 10px; 
 
    /* for old Konqueror browsers */ 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
} 
 
.talentcontent { 
 
    width: 450px; 
 
    height: auto; 
 
    max-width: 80%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: #000; 
 
    margin: 0 auto; 
 
    min-height: 280px; 
 
    margin: 0 auto; 
 
}

<div class="talentcontainer"> 
 
    <div class="talentimg"> 
 
    <img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png"> 
 
    </div> 
 
    <div class="talentcontent"> 
 
    <h8>NAME HERE</h8> 
 
    </div> 
 
</div>

그리고 시간이 나는 데 문제의 이미지 : display: inline-block alongwith

Answer 1

사용 vertical-align: top

여기 내 코드입니다.

.talentcontainer { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
} 
 
.talentimg { 
 
    width: 250px; 
 
    height: 280px; 
 
    max-width: 80%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    /* future proofing */ 
 
    -khtml-border-radius: 10px; 
 
    /* for old Konqueror browsers */ 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
} 
 
.talentcontent { 
 
    width: 450px; 
 
    height: auto; 
 
    max-width: 80%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #000; 
 
    margin: 0 auto; 
 
    min-height: 280px; 
 
    margin: 0 auto; 
 
}

<div class="talentcontainer"> 
 
    <div class="talentimg"> 
 
    <img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png"> 
 
    </div> 
 
    <div class="talentcontent"> 
 
    <h8>NAME HERE</h8> 
 
    </div> 
 
</div>

Answer 2

당신은뿐만 아니라 요소를 떠하여이 작업을 수행 할 수 있습니다. 두 요소 모두에 대해 왼쪽 부동을 추가합니다.

.talentimg{ 
    float:left; 
} 

.talentcontent{ 
    float:left; 
}