두 div로 div를 만드는 방법은 무엇입니까?

Question

나는 html을 배우고 있으며 사람들의 사진과 그 사람에 관한 데이터가있는 패널, 예를 들어 이름, 전자 메일, 전화 번호 등을하려고 노력하고 있습니다. 어떻게해야할지 모르겠지만, div를 다른 안에 넣는 법.

이 이미지와 비슷한 것을 생성하는 html 코드를 만들려면 어떻게해야합니까? "큰"div에 약간의 색상이 있고, 여기에는 이미지와 사람에 관한 정보를위한 두 개의 "보이지 않는"div가 있습니다. 다음에 배치 할 DIV 년대에

Answer 1

사용 CSS 속성 display: inline-block (이를 사용해야합니다, 잠시 동안 변경할 수 없습니다) sites.google.com :

PS :이 웹 사이트는 플랫폼에 서로에게 또는 float: right 또는 왼쪽. 나는 display을 선호한다.

Answer 2

두 개의 컨테이너 div를 만들고 HTML 내에 두 개의 div를 넣을 수 있습니다. CSS에서 container div는 기본적으로 세로로 정렬됩니다. 즉, 각 컨테이너와 각 div에 대해 float: left;을 적용해야합니다.

http://jsfiddle.net/LA7js/

<div class="left-container"> 
    <div class="image-left"></div> 
    <div class="info-left"></div> 
</div> 

<div class="right-container"> 
    <div class="image-right"></div> 
    <div class="info-right"></div> 
</div> 

Answer 3

HTML

<div id="container"> 
    <div id="left"> 
     <div class="image"></div> 
     <div class="contactInfo"></div> 
    </div> 
    <div id="right"> 
     <div class="image"></div> 
     <div class="contactInfo"></div> 
    </div> 
</div> 

CSS

#container { 
    /*width and height of main container */ 
    width: 1000px; 
    height:400px; 
} 

#left, #right { 
    float:left; 
    height: 300px; 
    width: 400px; 
} 

div.image { 
    float: left; 
    width: 200px; 
    height: 200px; 
} 

div.contactInfo { 
    float: left; 
    width: 100px; 
    height: 200px; 
} 

높이와 너비의 숫자는 이것에 대한 총 학점입니다. 그러나 당신은 아이디어를 얻습니다. 숫자를 가지고 놀아 라. CSS는 당신의 친구입니다 :)