我的图像不会与他们的DIV保持联系

Question

我把图像放在DIV中。我希望所有三张照片都在他们的DIV边框内，但它似乎不起作用：

#container {
  margin-right: 10%;
  margin-left: 10%;
  border-style: solid;
  border-width: 5px;
  border-color: orange;
  background-color: yellow;
}

h1 {
  text-align: center;
}

#original,
#alike1,
#alike2 {
  margin: 10px;
  border-style: solid;
  border-width: 5px;
  border-color: orange;
  background-color: rgb(0, 200, 255);
}

img.pic2,
img.pic3 {
  float: right;
  clear: both;
  overflow: hidden;
  margin: 10px;
}

#pic1 {
  float: right;
  clear: both;
  overflow: hidden;
  margin-right: 20px;
  margin-top: 40px;
}

<div id="container">

  <h1> Trump Hair </h1>

  <div id="original">
    <h2> Original </h2>
    <p> The Donald
      <div> <img id=pic1 height="100" alt="Don" src="http://lorempixel.com/100/100/people"> </div>
    </p>
    <p> This is the original Trump hair. It is found often in nature.
      <p>
  </div>

  <div id="alike1">
    <h2> Look alike #1</h2>
    <p>Corn Silk <img class="pic2" height="100" alt="Corn" src="http://lorempixel.com/100/100/cats"></p>
    <p>There have been many cases of corn silk that appear like Trump's hair.
      <p>
  </div>

  <div id="alike2">
    <h2> Look alike #1 </h2>
    <p> Llama Hair <img class="pic3" alt="llama" height="100" src="http://lorempixel.com/100/100/abstract"> </p>
    <p> There are many animals that have Trump hair. This llama is looking very stylish. </p>
  </div>

</div>

我该如何解决？我希望所有三张照片都在他们的DIV边框内，但现在它看起来像这样：

as you can see the images flow out of the divs：

Answer 1

问题是图像是浮动的。浮动元素时，它会从页面的正常流程中取出（就像绝对或固定位置一样）。

一种可能的解决方案是使盒子长大以适应其中的图像。您可以通过添加overflow:auto和height:auto来实现这一目标，然后该框将增长到包含其范围内的所有浮动元素：

＆＃13;

＆＃13;

#container {
  margin-right: 10%;
  margin-left: 10%;
  border-style: solid;
  border-width: 5px;
  border-color: orange;
  background-color: yellow;
}

h1 {
  text-align: center;
}

#original,
#alike1,
#alike2 {
  margin: 10px;
  border-style: solid;
  border-width: 5px;
  border-color: orange;
  background-color: rgb(0, 200, 255);
  /* add the changes here */
  height: auto;
  overflow: auto;
}

img.pic2,
img.pic3 {
  float: right;
  clear: both;
  overflow: hidden;
  margin: 10px;
}

#pic1 {
  float: right;
  clear: both;
  overflow: hidden;
  margin-right: 20px;
  margin-top: 40px;
}

＆＃13;

<div id="container">

  <h1> Trump Hair </h1>

  <div id="original">
    <h2> Original </h2>
    <p> The Donald
      <div> <img id=pic1 height="100" alt="Don" src="http://lorempixel.com/100/100/people"> </div>
    </p>
    <p> This is the original Trump hair. It is found often in nature.
      <p>
  </div>

  <div id="alike1">
    <h2> Look alike #1</h2>
    <p>Corn Silk <img class="pic2" height="100" alt="Corn" src="http://lorempixel.com/100/100/cats"></p>
    <p>There have been many cases of corn silk that appear like Trump's hair.
      <p>
  </div>

  <div id="alike2">
    <h2> Look alike #1 </h2>
    <p> Llama Hair <img class="pic3" alt="llama" height="100" src="http://lorempixel.com/100/100/abstract"> </p>
    <p> There are many animals that have Trump hair. This llama is looking very stylish. </p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;