html - 为什么我的图片不留在我的容器中？

Question

我遇到了一个问题，我的图片不会留在我的 wrapper 中。我不能移动我的盒子，也不能为我的图像 div 编辑我的 css。谁知道如何破解此案？我真的希望你们能理解我并帮助我找到解决问题的方法。

如果需要，我会尝试提供更多必要的信息。

#content{
  font-family: 'Times New Roman';
  font-size: 14px;
  font-style: oblique;
  margin: 30px 0;
  background: white;
  padding: 20px;
  clear: both;
  width: 100%;
  float: left;
}

#imagediv {
  width: 200px;
  height: 300px;
  margin-right: 325px;  
  float: right;
  border: 2px solid black;
  position: relative;
}

#imagediv2 {
  width: 200px;
  height: 300px;
  float: left;
  border: 2px solid black;
  position: relative;
}

<div id="page">
  <div id="logo">
    <h1>My Web Portfolio</a></h1>
  </div>
  <div id="nav">
    <ul>
      <li><a href="#/home.html">Home</a></li>
      <li><a href="#/portfolio.html">Portfolio</a></li>
      <li><a href="#/me.html">Contact</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>Portfolio</h2>
    <h3>Check out my slider with my templates</h3>

    <div id="imagediv">
      <img src="http://placehold.it/200x300">
    </div>
    <div id="imagediv2">
      <img src="http://placehold.it/200x300">
    </div>
    <div id="imagediv3">
      <img src="http://placehold.it/200x300">
    </div>
  </div>
</div>

Answer 1

试试这个 https://jsfiddle.net/2Lzo9vfc/162/

HTML

<div id="page">
  <div id="logo">
    <h1>My Web Portfolio</a></h1>
  </div>
  <div id="nav">
    <ul>
      <li><a href="#/home.html">Home</a></li>
      <li><a href="#/portfolio.html">Portfolio</a></li>
      <li><a href="#/me.html">Contact</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>Portfolio</h2>
    <h3>Check out my slider with my templates</h3>

    <div class="image-divs">
     <div id="imagediv">
      <img src="http://placehold.it/200x300">
    </div>
    <div id="imagediv2">
      <img src="http://placehold.it/200x300">
    </div>
    <div id="imagediv3">
      <img src="http://placehold.it/200x300">
    </div>
  </div>
</div>
</div>

CSS

#content{
  font-family: 'Times New Roman';
  font-size: 14px;
  font-style: oblique;
  margin: 30px 0;
  background: white;
  padding: 20px;
  clear: both;
  width: 100%;
  float: left;
}

#imagediv {
  width: 200px;
  height: 300px;
  border: 2px solid black;
  position: relative;
}

#imagediv2 {
  width: 200px;
  height: 300px;
  border: 2px solid black;
  position: relative;
}

.image-divs {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.image-divs div {
    margin: 0 auto;
    display: inline-block;
}