html - 如何制作一个里面有两个div的div？

Question

我正在学习 html，我正在尝试做一个面板，上面有人物照片和关于那个人的一些数据，例如姓名、电子邮件、电话号码等。我不知道该怎么做，怎么做在其他里面放一个div。

我该怎么做才能制作一个在这张图片中生成类似内容的 html 代码？带有某种颜色的“大” div，这个包含两个“不可见” div，一个用于图像，另一个用于有关人员的信息。

PS.：网站在平台：sites.google.com（暂时改不了，只能用这个）

Answer 1

display: inline-block在您希望彼此相邻float: right或离开的 div 上使用 css 属性。我更喜欢display.

Answer 2

您可以创建两个容器 div，并将两个 div 放入它们的 html 中。在 css 中，容器的 div 默认是垂直排列的，这意味着你应该float: left;为每个容器和其中的每个 div 申请。

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 是你的朋友 :)