我遇到了问题,我的照片不会留在我的包装内。 我无法移动我的盒子,或编辑我的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;
答案 0 :(得分:0)
我在这里弄到了一个小提琴: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;
}
&#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;