다른 크기에 맞게 이미지를 인라인으로 표시합니다.

Question

CSS를 사용하여 아래 상자 유형을 만들고 싶습니다. 이후 CSS에서 초보자, 내 가장 큰 관심사는 seperator 라인이 가슴 이미지가 상자의 크기에 관계없이 약간의 간격을 갖도록 머리글을 만드는 것입니다.

이

내 시도 :

HTML :

<div class="block"> 
    <p><em>04-05</em></p> 
    <img class="block_pic" src="..."/> 
</div> 

CSS :

.block { 
    border: solid red; 
    width:250px; 
    height:150px; 
} 

p{ 
border-bottom:solid black 2px; 
width:83%; 
margin:5px; 
} 

.block_pic { 
    width:30px; 
    position:absolute; 
    top: 5.5%; 
    right:86.5%; 
} 

(https://codepen.io/anon/pen/QqwoPV). 내 접근 방식은 <p>에 border-bottom을 타임 스탬프와 함께 추가 한 다음 나중에 position:absolute으로 이미지를 배치하여 국경의 끝에 윗면과 오른쪽의 숫자를 조정하여 표시되도록했습니다. 마지막으로 올바른 위치에 도달 할 때까지 반복해서 번호를 변경함으로써이 작업을 성공적으로 수행 할 수있었습니다. 내가 한 일을하는 대신에 심장 이미지를 배치하는 현명한 방법이 있습니까? 다양한 크기의 반응 형 상자를 만들려고 할 때 유용합니다.

Answer 1

이미지를 먼저 배치하고 (p 요소 앞) 이미지에 float: right을 사용하십시오. 나는 CALC 기능을 인식하지 않았다

https://codepen.io/anon/pen/MEYRVY

.block { 
 
    border: solid red; 
 
    width:250px; 
 
    height:150px; 
 
} 
 

 
p{ 
 
border-bottom:solid black 2px; 
 
width: calc(100% - 45px); 
 
margin:5px; 
 
} 
 

 
.block_pic { 
 
    width:30px; 
 
    float: right; 
 
    margin: 5px; 
 
}

<div class="block"> 
 
    <img class="block_pic" src="..."/> 
 
    <p><em>04-05</em></p> 
 
</div>