html 코드 좀 도와주세요..

html 코드 좀 도와주세요..

QA

html 코드 좀 도와주세요..

본문

지금 제가 하고 싶은 게 사진 옆에 글을 쓰고

그 밑에는 글 옆에 사진이 있는 걸 하고 싶은데.... 무슨 뜻인지는 대충 감이 오실 거라 믿습니다.

코드랑 이미지는 있고 이걸 조금 변형 시켜야 할 거 같은데... 조금 도와주세요...

<div class="intro">
    주요 업무
</div>
<div class="l"></div>
<div class="page2" style="border:1px solid #dfdfdf;">
    <div class="d">
        <div class="sound">
            <img src='<?=G5_THEME_URL?>/template/page2/images/sound.jpg'>
        </div>
      <div>
        <h1>
            <p><b>녹취록 작성</b></p>
            <span>민·형사상 사건을 위해 이후 재생할 목적으로 취해 둔 음성이나 화상 자료를 검찰, 경찰, 법정에 제출하기 위한 자료로 문서화해 드립니다.</span>
        </h1>
        <ul>
            <li>
               1. 휴대폰 녹음, 현장대화 녹음, 녹음기 대화녹음 등
            </li>
            <li>
                2. 영상촬영 파일, 블랙박스 영상 등
            </li>
            <li>
               3. 각종 통화 녹음 및 상담전화 녹음
            </li>
        </ul>
      </div>
    </div>
    <div class="e">
        <div class="finger">
            <img src='<?=G5_THEME_URL?>/template/page2/images/meeting.jpg'>
        </div>
      <div>
        <h1>
            <p><b>회의록 작성</b></p>
            <span>회의가 이루어지는 장소에 국가공인 속기사가 직접 회의에 입회하여 발언되는 모든 내용, 상황을 기록해서 문서화해 드립니다.
            </span>
        </h1>
        <ul>
            <li>
                1. 공공기관의 각 위원회
            </li>
            <li>
                2. 시민단체 및 협회 회의
            </li>
            <li>
                3. 주주총회
            </li>
            <li>
                4. 재건축/재개발 조합 총회 및 이사회, 대의원회
            </li>
            <li>
                5. 세미나, 공청회, 토론회, 간담회, 각종 회의
            </li>
        </ul>
      </div>
   </div>
</div>

 

.page2{margin:0 auto;font-size:18px; margin-top:50px;width:1100px;padding-right:50px;padding-left:50px; padding-top: 80px; padding-bottom: 20px;}

.l {width:10%; height:5px;background-color:#dfdfdf;display:block;margin:0 auto;margin-top:20px;}
.page2::after{display:block;clear:both;content:"";}
.d{float:left;width:400px;margin-left:80px;}
.e{float:left;width:400px;margin-left:80px;}
.intro{font-size:42px;margin-top:80px;color:#4b4b4b;font-weight:500;text-align: center;}
.sound{width:100%;}
.page2 h1 p {font-size: 22px; color: #000; margin-bottom: 20px; }

.page2 span{line-height: 25px; color: #000;}
.page2 ul {margin-top: 30px; margin-bottom: 50px;}
.page2 ul li {line-height: 30px; color: #4d4d4d; text-align: left;}


@media screen and ( max-width:1100px)
{
    .intro{margin-top: 30px;}
    .l {width: 25%;}
    .page2{width: 95%; padding: 0;}
    .d{width: 95%; float: none; margin-left: 0; margin: 0 auto;}
    .e{width: 95%; float: none; margin-left: 0; margin: 0 auto;}
    .page2 h1 p{margin-top: 20px;}
}

 

긴 글 죄송합니다...

꼭 좀 도와주세요...

 

이 질문에 댓글 쓰기 :

답변 1

사진 글 / 글 사진 과 같은 형태로 구성하고 싶으신게 맞으실까요?

지금 사용하신 것처럼 각각 이미지와 글 영역에 가로 넓이를 설정하고 float: left/right를 지정해주는 방법이 있고, 부모가 되는 영역에 display: flex 를 사용하는 방법도 있습니다. 원하는 레이아웃을 먼저 잡고 해당 부분의 너비와 포지션을 지정해보시면 쉽게 해결하실 수 있으실 듯합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 418
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT