반응형
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
반응형
'programing' 카테고리의 다른 글
JSONAray에서 JSONObject 가져오기 (0) | 2023.03.01 |
---|---|
2개의 마이크로 서비스 간의 통신 (0) | 2023.03.01 |
typescript: 오류 TS2693: 'Promise'는 유형을 나타낼 뿐이지만 여기서 값으로 사용되고 있습니다. (0) | 2023.03.01 |
woocommerce 2.1.5의 도구 메뉴에서 누락된 woocommerce 페이지를 설치하는 방법 (0) | 2023.02.24 |
TypeScript 인터페이스에서 특정 문자열을 요구하는 방법 (0) | 2023.02.24 |