두 개의 인라인 블록 요소 사이의 이미지

Question

처음부터 HTML & CSS를 사용하여 웹 사이트를 디자인하고 있습니다. 하지만 지금은 특정 부분에 문제가 있습니다. 을 그리고 이것은 내가 실제로 무엇을 가지고 : 다음 이미지는 내가 필요에 대해 설명 내 #article-who이 display: inline-block (I 후 두 섹션에 분할 할 수 있습니다). 그러나 문제는 #square-logo입니다. inline-block을 사용하면 div는 같은 줄에 쌓이지 않습니다. 이 요소를 기사로 옮길 수는 있지만 오른쪽 이미지는 어떻게됩니까?

고정 된 높이와 너비로 div's을 사용하여 아이디어를 보내주십시오. 미리 감사드립니다.

편집 : Here은 나의 현재 HTML & CSS입니다 (전체 화면에서 생성 된 미리보기는 전체 화면에서 다릅니다).

Answer 1

이와 비슷한 기능이 있습니까?

.container { 
 
    width: 320px; 
 
    background-color: yellow; 
 
    overflow: auto; 
 
} 
 
.one { 
 
    background-color: cyan; 
 
    width: 120px; 
 
    height: 150px; 
 
} 
 
.two { 
 
    background-color: indigo; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
.three { 
 
    background-color: cornflowerblue; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.four { 
 
    background-color: indianred; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 
.five { 
 
    width: 170px; 
 
    height: 100px; 
 
    background-color: firebrick; 
 
    margin-top: -100px; 
 
} 
 
.align { 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="one align"></div> 
 
    <div class="two align"></div> 
 
    <div class="three align"></div> 
 
    <div class="four align"></div> 
 
    <div class="five align"></div> 
 
</div>

나는 부정적 margin-top을 적용하여 .five 즉 마지막 요소에 대한 빠른 수정을했다.

Answer 2

div 태그 대신 span 태그를 사용하십시오. div 태그는 끝에 줄 바꿈을 추가하는 것으로 보이지만 span 태그는 그렇지 않습니다. div 태그 안에 여러 개의 span 태그를 사용하여 전체 단일 블록으로 만드십시오. <div> <span> </span> <span> </span> </div>