Question

我正在努力实现从div中流出的图像。基本上，在我的标题中，我有一个960px的固定宽度，徽标图像有一些东西，我想坐在960px之外。

有没有一个很好的干净方法来实现这个目标？

Answer 1

执行此操作的简单方法（适用于大多数浏览器）是，您使主包装器具有position:relative，并且使div（您想要流向外部）具有position: absolute; left: -25px; top: -25px;

使用position:relative作为包装器使position:absolute亲属在父容器内。

Answer 2

你也可以通过绝对定位来实现这一目标。下面的简单示例：

http://jsfiddle.net/spacebeers/9QJ4w/1/

Answer 3

您可以使用CSS的position属性来完成此任务：

HTML：

<div><p>Some content<img src="http://placehold.it/50x50"></p></div>

CSS：

div
{
    width: 100%;
    height: 175px;
}

div p
{
    width: 960px;
    margin: 0 auto;
    background-color: #333;
    height: 175px;
    text-indent: 20px;
}

div img
{
    position: relative;
    right: 140px;
}

http://jsfiddle.net/FpTDc/

Answer 4

将您的徽标放在固定的div中，并为该div添加样式overflow:hidden

Answer 5

你的朋友将会溢出：可见。

包含div的宽度为960px，溢出：可见。在里面，你将有一个相对或绝对定位的图像（你需要将'左'偏移到它的中心）

Answer 6

<div>
    <img src="" />
</div>

div { width:300px; height:100px; background:red; margin:100px; }
img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }

代码：http://jsfiddle.net/cSQrR/

图像流出div

6 个答案: