Question

我有三列，我需要在每列的右上角添加一张图片。

这是简短的概述。

HTML：

<body>
<div id="outerDiv">
    <div id="content">
        <div id="left">
            <p class="clear"></p>
.... my content
        </div>
        <div id="center">
.... my content
        </div>
        <div id="right">
            <p class="clear"></p>
.... my content
        </div>
        <p class="clear"></p>
    </div>
</div>
</body>

CSS：

body  {
    font-family: Georgia, serif;  
    margin: -16px 0 0 0;          
    padding: 0;        
}

#outerDiv {
    width: auto;       
    margin: 0 auto;    
    height: 1110px;
}

#left {
    float: left;
    width: 32%;
    height: 1110px;
    margin: 0 0;
    padding: 0 0 0 0;
    overflow:scroll;
}

#center {
    float: left;
    width: 35%;
    height: 1110px;
    margin: 0 0;
    padding: 0 0;
    overflow:scroll;
}

#right {
    float: left;
    width: 32%;
    height: 1110px;
    margin: 0 0;
    padding: 0 0 0 0;
    overflow:scroll;
}

图片并不重要，只是一些小图片。

由于

编辑：它应该是html元素，然后我可以与它进行交互。

Answer 1

让你成为div position: relative

所以你可以在里面设置图像的位置：

http://jsfiddle.net/5aFzh/8/

修改

您为什么使用：margin: -16px 0 0 0;

那不是margin的真正含义，以后会在屁股上咬你。

Answer 2

将类添加到名为“column”的列并添加背景图像属性

background-image:url('image.jpg');
background-repeat:no-repeat;
background-position:right top;

Answer 3

添加

background: url(yourimage.png) no-repeat;

Answer 4

#left, #center, #right {
    background:url(image.jpg) top right no-repeat
}

如果div中的所有#content都是列，您只需执行以下操作：

#content div {
    background:url(image.jpg) top right no-repeat
}

CSS，如何在每个列的角落添加图片

4 个答案: