그누보드 QA - 코딩 문제인데요

코딩 문제인데요

rlaakfwk 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.02.03 11:17:32 조회 1919 (49.♡.♡.187)

본문

831400379_1517624450.2821.png

지금 현재 제목줄이 회원이미지와 겹치면서

글 라인이 이상해지는데요

------------------------------------------------------------------------------------------

831400379_1517624041.3205.png

제목이 잛을땐 괜찮은데

------------------------------------------------------------------------------------------------

831400379_1517624048.1304.png

제목이 이정도 길이면 아래 공간이 많아지면서 이상해집니다

----------------------------------------------------------------------------------------------------

제목쪽과 사진쪽을 div로 나눠서 해야될까여?

pc는 겨우겨우 되긴 했는데

모바일은 잘 안되서 도움좀 부탁드립니다

지금 제 코드로는 안되는걸까여?


<header>
            <h1 id="bo_v_title">
          <span id="pro_img"> <?php echo get_member_profile_img($view['mb_id']); ?>  </span>
        <span style="color: #607D8B"> <? if ($category_name){?> [<?=$view['ca_name']?>] <?}?>
        </span>
            <strong id="head_title">    <?=cut_str(get_text($view['wr_subject']), 70); // 글제목 출력?></strong>
      <section id="bo_v_info">
         <span class="glyphicon glyphicon-user"></span> <?php echo $view['name'] ?><?php if ($is_ip_view) { echo " ($ip)"; } ?>
            <span class="glyphicon glyphicon-time ml5"></span> <?php echo date("y-m-d H:i", strtotime($view['wr_datetime'])) ?>
           
         <a class=신고버튼   </a> 
        </section>
            </h1>
        </header>

pro_img를 포지션 앱솔루트로 해보고

pro_img를

<section id="bo_v_info"> 쪽에 넣어도 잘 안되드라고요

도움좀 부탁드려봅니다

http://noleter.dothome.co.kr/bbs/board.php?bo_table=qa&device=mobile

#그누보드5

답변 3

아름다운수 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2018-02-03 13:22:43 171.♡.♡.79

제목란의 크기를 부모 div(.subject)와 같게하고 오른쪽 패딩을 이미지 사이즈만큼 줍니다.

그러면 글이 길어지게 되어도 오른쪽 패딩 사이즈 때문에 아래와 이미지와 같이 줄바꿈이 됩니다.

2884200271_1517631813.213.gif

그리고 패딩으로 생긴 공백에 absolute를 이용하여 이미지를 넣으면 됩니다.

아래는 대략적인 소스입니다.


<div class="wrap">
<div class="subject">제목입니다.</div>
<div class="thumbnail"><img src="img/userThumb.gif" width="50" height="60"></div>
</div><!-- / end of .wrap -->
 
.wrap { position:relative }
.subject { width:100%; height:100%; padding-right:50px; }
.thumbnamil { position: absolute;top:0;right:0;width:50px;height:60px; }