为什么我的照片会留在我的容器中?

时间:2015-11-23 09:02:52

标签: html css width space

我遇到了问题,我的照片不会留在我的包装内。 我无法移动我的盒子,或编辑我的CSS为我的图像div。 有谁知道如何破解这个案子? 我真的希望你们能理解我并帮助我找到解决问题的方法。

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



#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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我在这里弄到了一个小提琴:http://jsfiddle.net/m4gjwsx5/4/

&#13;
&#13;
#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;
}
&#13;
<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>
&#13;
&#13;
&#13;