我试图将3 images
放入left side of the div
,而不使用margin-right
:
对于图像我想到了float: left
,但它不起作用。
这是我的jsfiddle:myFiddle
HTML :
<center>
<div id="container" style="width:700px;">
<div id="header" style="background-color:rgb(249,204,157);">
<font style="margin-bottom:0; text-align: center;font-size: 50px;">avb</font>
<img src="image.jpg" style="cursor: pointer; width: 76px; height: 60px; position: fixed; margin-right: 154px;">
<img src="image.jpg" style="cursor: pointer; width: 66px; height: 59px; position: fixed; margin-right: 85px;">
<img src="image.jpg" style="cursor: pointer; width: 77px; height: 62px; position: fixed; margin-right: 5px;">
</div>
</div>
</center>
风格:
<style>
#container { float: center; }
body {
padding: 25px;
}
</style>
任何帮助表示赞赏!
答案 0 :(得分:2)
删除你的position: fixed;
并提及下面的css样式...不需要为每个img编写单独的样式..
img
{
float: left;
width: 76px;
height: 60px;
margin-right: 5px;
}
答案 1 :(得分:1)
我认为float: left
无效,因为您在图片上有position: fixed
。
当我添加这个css并删除位置时:修复它看起来几乎和你的图片一样。
img{
float: left;
margin-right: 5px;
}
尝试使用类而不是内联样式。 :)
答案 2 :(得分:1)
<center>
<div id="container" style="width:700px;">
<div id="header" style="background-color:rgb(249,204,157);">
<font style="margin-bottom:0; text-align: center;font-size: 50px;">avb</font>
<img src="image.jpg" style="cursor: pointer; width: 76px; height: 60px; float:left;">
<img src="image.jpg" style="cursor: pointer; width: 66px; height: 59px; float:left;">
<img src="image.jpg" style="cursor: pointer; width: 77px; height: 62px; float:left;">
</div>
</div>
它似乎对我有用..