테스트 사이트 - 개발 중인 베타 버전입니다

코딩 문제인데요 채택완료

rlaakfwk 7년 전 조회 2,272

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

글 라인이 이상해지는데요 

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

 

제목이 잛을땐 괜찮은데

 

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

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

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

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

pc는 겨우겨우 되긴 했는데 

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

 

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

</p>

<p><header>

            <h1 id="bo_v_title">

          <span id="pro_img"> <?php echo get_member_profile_img($view['mb_id']); ?>  </span></p>

<p>        <span style="color: #607D8B"> <? if ($category_name){?> [<?=$view['ca_name']?>] <?}?>

        </span>

            <strong id="head_title">    <?=cut_str(get_text($view['wr_subject']), 70); // 글제목 출력?></strong></p>

<p>      <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">http://noleter.dothome.co.kr/bbs/board.php?bo_table=qa&device=mobile

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트

 

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

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

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

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

</p>

<p><div class="wrap"></p>

<p><div class="subject">제목입니다.</div></p>

<p><div class="thumbnail"><img src="img/userThumb.gif" width="50" height="60"></div></p>

<p></div><!-- / end of .wrap --></p>

<p> </p>

<p>.wrap { position:relative }</p>

<p>.subject { width:100%; height:100%; padding-right:50px; }</p>

<p>.thumbnamil { position: absolute;top:0;right:0;width:50px;height:60px; }</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

r
rlaakfwk
7년 전
친절한 답변 감사합니다~

댓글을 작성하려면 로그인이 필요합니다.

글제목 출력 옆에 70을 40~50으로 해보심이^^

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인