为什么我的图片没有留在我的容器中？答案

【问题标题】：Why does'nt my pictures stay in my container?为什么我的图片没有留在我的容器中？
【发布时间】：2016-02-25 07:47:24
【问题描述】：

我遇到了一个问题，我的图片不会留在我的包装内。我不能用我的盒子移动，或者为我的图像 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>

【问题讨论】：

你的问题有点不清楚。
“图像 div”我希望它们移动到我的页面中心，但我无法移动它们，我正在把头发拉出来。
发布他们现在的样子以及您希望他们看起来如何的屏幕截图。你的意思是像这样jsfiddle.net/m4gjwsx5 ？
完全正确，但框是相邻的。
喜欢这个jsfiddle.net/m4gjwsx5/4?

标签： html css width space

【解决方案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;
}

【讨论】：

【解决方案2】：

我在这里给你做了一个小提琴：http://jsfiddle.net/m4gjwsx5/4/

#content{
  font-family: 'Times New Roman';
  font-size: 14px;
  font-style: oblique;
  margin: 30px 0;
  background: white;
  padding: 20px;
  clear: both;
  width: 100%;
    text-align: center;
}
.custom_img{
    display: inline-block;
}

<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" class='custom_img'>
      <img src="http://placehold.it/200x300">
    </div>
    <div id="imagediv2" class='custom_img'>
      <img src="http://placehold.it/200x300">
    </div>
    <div id="imagediv3" class='custom_img'>
      <img src="http://placehold.it/200x300">
    </div>
  </div>
</div>

【讨论】：