如何制作一个内有两个div的div？

Question

我正在学习HTML，我正在尝试做一些类似于人物照片的面板以及有关该人的一些数据，例如姓名，电子邮件，电话号码等。我不知道该怎么做，如何将div放入其他内容。

如何制作生成此图像内容的html代码？ 带有一些颜色的“大”div，这个包含两个“隐形”div，一个用于图像，另一个用于关于人的信息。

PS：网站在平台上：sites.google.com（暂时无法更改，必须使用此内容）

Answer 1

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

Answer 2

你可以创建两个容器div，并在它们的html中放入两个div。在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是你的朋友：）