Question

#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px;
height:180px;
width:62%;
margin:auto;
}
.im1{
height:180px;
width:200px;
}

<div id="one">
 <img src="inspirational1.jpg" alt="picture1" class="im1"/>
 <img src="inspirational2.jpg" alt="picture2" class="im1"/>
 <img src="inspirational3.jpg" alt="picture3" class="im1"/>
 <img src="inspirational4.jpg" alt="picture4" class="im1"/>
<img src="inspirational5.jpg" alt="picture5" class="im1"/>
 </div>

当我在桌面上工作时，上面的代码非常适合，但是当我在笔记本电脑中打开时，所有图像都在那里。如果在新的浏览器或者scree中打开网站，我想让他们适应div，确保他们不会去任何地方。欢迎提出任何建议

Answer 1

如果我理解得对，你可以对你的图像使用浮动指令在css中添加以下行：

#one img { float:left; }

其中#one是容器div

或使用图片上的类： im1 {float：left;}

在你的容器之后添加一个div，类为.clear clear clear {clear：both;}

Answer 2

因为你只是说css ..你不能动态地做，就像图像的数量改变..

然而，只有css和固定数量的图像，就像你在问题中显示的那样，你可以改用百分比，就像这样

.im1 {
    width: 19%;
}

因为父/ 5图像的100％宽度= 20％，但有时你想设置一点点以确保某些浏览器不能正确渲染它，所以它们都适合在同一条线上。

此外，由于您为父级使用了ID #one，因此可能需要使用

#one .im1 {
   width: 19%;
}

代替

Answer 3

http://jsfiddle.net/LYL2S/1/

#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding:20px;

margin:auto;
    width:620px;
}
.im1{
height:180px;
width:200px;
}

我想使用CSS在html中水平添加许多图像

3 个答案: