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

时间:2014-01-29 08:48:58

标签: html css

我试图将3 images放入left side of the div,而不使用margin-right

enter image description here

对于图像我想到了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>

任何帮助表示赞赏!

3 个答案:

答案 0 :(得分:2)

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

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

Fiddle

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

它似乎对我有用..