2

我通过 Stackoverflow 进行了搜索，发现很多人试图避免在 CSS 列中重叠，但实际上我被要求让文本和图像重叠。

更新：

更好的图像解释了我被要求做什么，以及我正在使用的代码的链接。谢谢！

在此处输入图像描述

http://unfetteredletters.com/webdev/twocolumnlayout.jpg

代码链接： http: //unfetteredletters.com/webdev/AF_columnLayout/AF_2columnLayout.html

这可能吗？

4

4 回答 4

1

你可以用负边距做这样的事情。

看看这个：http ://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

#content {margin-right:-100px;}
于 2013-07-17T19:35:50.057 回答
0

您需要设置图像的包含块，并且用于显示的 divs css 属性是相对的。然后将要重叠显示属性的子项设置为绝对。现在您可以使用适当的像素将它们定位在左右顶部或底部。但您确实需要提供您的 css 样式，以便轻松给出您可以使用的答案。

于 2013-07-17T19:37:42.077 回答
0

要回答你的问题，是的，这是可能的。

要回答您没有提出的问题，您可以将图像设为背景图像。

于 2013-07-17T19:36:15.413 回答
0

我唯一能想到的也是在图像上使用负边距。但只有当您将第一个图像放在第二个容器中并且您知道图像的高度时，它才有效。因此，对于您的示例，这很好，但它不是适合所有可能性的解决方案。

HTML

<div>
    [TEXT]
</div>

<div>
    <img src="[URL]" alt="[ALT]">
    [TEXT]
</div>

CSS

,height和width值margin只是示例值。

div {
    float: left;
    width: 300px;
    margin: 0 20px 0 0;
    vertical-align: top;
}

div:nth-child(1) {
    padding: 250px 0 0 0;
}

img {
    float: left;        
    width: 350px;
    margin: 0 0 0 -320px;
}

演示

先试后买

于 2013-07-17T19:51:19.887 回答