css table-cell에 이미지만 넣으면 깨지네요..ㅠ
본문
css로 위와 같은 형태를 만드려고 table에 입혔습니다. 그런데 오른쪽 셀에 이미지만 들어가면 깨지네요. (왼쪽 텍스트 div 위쪽에 여백이 생기네요..) 이미지가 안들어가고 다른 일반 text 등이 들어가면 제대로 나열이 됩니다. float으로 잡으면 오른쪽 이미지가 없을시 왼쪽 텍스트가 오른쪽 끝까지 뻗어나가질 않아서 table에 넣으려 합니다. 이미지를 넣으면 왜 깨지는지 모르겠네요..ㅠ
조언을 부탁드려도 될런지요?.. 감사합니다.
<div style="display:table;background:#ccc;">
<div style="display:table-cell;background:gray;">
여기는 셀1 자리입니다.<br />
여기는 셀1 자리입니다.
</div>
<div style="display:table-cell;background:tomato;">
<?php echo wp_get_attachment_image( 1940, "profile_myimg"); ?> <!-- 이미지가 들어가는 자리입니다. -->
</div>
</div>
답변 1
<div style="display:table;background:#ccc;"> <div style="display:table-cell;background:gray;vertical-align:top"> 여기는 셀1 자리입니다.<br /> 여기는 셀1 자리입니다. </div> <div style="display:table-cell;background:tomato;"> <img src="http://haneum-ehon.com/images/new/m_3_.jpg" alt=""> </div> </div>셀 1자리 style에 vertical-align:top 추가 해 보셔요.
헐. vertical-align top을 주니 되네요. 생각지도 못했네요. 당연히 텍스트가 위에서 부터 자리잡을거라 생각했는데..ㅠ 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
