如何在兩個div內製作div？

Question

我正在學習HTML，我正在嘗試做一些面板，包括人物照片和一些關於該人物的數據，例如姓名，電子郵件，電話號碼等。我不知道如何做到這一點，如何把一個div放入其他的。

我該如何做一個html代碼，在這個圖像中生成一些東西？ 帶有某種顏色的「大」div，這個包含兩個「隱形」div，一個用於圖像，另一個用於獲取關於此人的信息。

PS：這個網站是在平臺上：sites.google.com（用於在不能改變，必須用這個）

Answer 1

使用CSS屬性display: inline-block的div的你希望未來的地方彼此或float: right或離開。我更喜歡display。

Answer 2

您可以創建兩個容器div，並將兩個div放入其html中。在CSS中，容器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; 
} 

高度和寬度的數字是BS的總數，但你明白了。玩數字。 CSS是你的朋友:)