>source

HTML

   <div style="background-color: #ffffcc;max-width: 1000px;">
            <div>
                <div style="max-width: 200px;display: inline-block;">
                    <img src="watch1.png">
                </div>
                <div style="display: inline-block;">
                    GOQii Smart Vital Fitness SpO2
                </div>
            </div>
        </div>

이것은 HTML의 정확한 코드입니다.
텍스트를 이미지의 오른쪽 상단에 배치하고 싶습니다. 처럼:-
/ ------------------- /여기에 텍스트
| 이미지 |
/ ------------------ /

  • 답변 # 1

    사용하다 vertical-align: top;

    <div style="background-color: #ffffcc;max-width: 1000px;">
      <div>
        <div style="max-width: 200px;display: inline-block;">
            <img src="https://picsum.photos/200">
        </div>
        <div style="display: inline-block; vertical-align: top;">
            GOQii Smart Vital Fitness SpO2
        </div>
      </div>
    </div>
    
    

  • 답변 # 2

    flex를 사용할 수도 있습니다.

     <div style="display: flex; align-items: center;">
        <div style="max-width: 200px;display: inline-block;">
          <img src="https://images-na.ssl-images-amazon.com/images/I/71CcdFCKHwL._SL1080_.jpg" height="100px">
        </div>
        <div>
          GOQii Smart Vital Fitness SpO2
        </div>
      </div>
    
    

관련 자료

  • 이전 excel - 조회 값에 따라 최대 값 찾기
  • 다음 javascript - 객체 내부의 여러 배열을 단일 배열로 병합