将图像放在div的左边而不使用margin-right

Question

我试图将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>

任何帮助表示赞赏！

Answer 1

删除你的position: fixed;并提及下面的css样式...不需要为每个img编写单独的样式..

img
{
    float: left;
    width: 76px;
    height: 60px;
    margin-right: 5px;
}

Fiddle

Answer 2

我认为float: left无效，因为您在图片上有position: fixed。 当我添加这个css并删除位置时：修复它看起来几乎和你的图片一样。

img{
    float: left;
    margin-right: 5px;
}

尝试使用类而不是内联样式。 ：）

Answer 3

    <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>

它似乎对我有用..