How to make a div with two div inside?

问题

I'm learning html and I'm trying to do something like a panel with photos of people and some data about that person, for example, name, email, phone number etc. I don't know how to do this, how to put a div inside other.

how can I do for make a html code who generates something like in this image? The "big" div with some color, and this one contains two "invisible" div, one for the image and the other for the information about the person.

PS.: The website is on the platform: sites.google.com (can't change for while, have to use this)

回答1:

Use css attribute display: inline-block on the div's you wish to place next to each other, or float: right or left. I prefer display.

回答2:

You can create two container div's , and put two divs inside their html. In the css, the container div's will be ordered vertically by default, which means you should apply float: left; for each container and for each div inside them.

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>

回答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;
}

The numbers for height and width are total BS for this.. but you get the idea. Play with the numbers. CSS is your friend :)

来源：https://stackoverflow.com/questions/19260725/how-to-make-a-div-with-two-div-inside

标签

html