programing

CSS를 통한 인라인 이미지 표시

testmans 2023. 3. 1. 09:41
반응형

CSS를 통한 인라인 이미지 표시

한 줄로 나란히 표시하고 싶은 이미지가 3개 있습니다.

HTML은 다음과 같습니다.

<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>

CSS는 다음과 같습니다.

#client_logos { display: inline-block; }

어떤 이유에서인지, 두 개의 로고만 나란히 표시됩니다.뭐가 잘못됐는지 모르겠어요.좋은 생각 있어요?

URL : http://rainleader.com/who-we-are/

스크린샷을 참조해 주세요.여기에 이미지 설명 입력

줄이 끊어졌네요.<br>마크업의 두 번째와 세 번째 이미지 사이에 있습니다.그걸 없애면 인라인으로 보일 거야

여기에 게재한 코드와 사이트상의 코드가 모두 다릅니다.휴식 시간이 있다<br>두 번째 이미지 뒤에 세 번째 이미지를 새 라인으로 옮깁니다.<br>올바르게 표시됩니다.

페이지에 다음 css를 배치합니다.

<style>
   #client_logos {
    display: inline-block;
    width:100%;
    }
  </style>

교체하다

<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" /></p>

로.

<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>

언급URL : https://stackoverflow.com/questions/13263186/display-images-inline-via-css

반응형