4

我正在寻找一个带有 div、:before 和 :after 伪元素和3 张图片的功能区。我让 :before 图像工作，但我似乎无法让 :after 图像与右侧对齐。（请不要链接到 css-tricks，他们使用纯 CSS，我追求图像！）

我认为使用相对位置可能是浮动的更好替代方案，但我不太了解它们。

旁白：有谁知道是什么导致了navbar-inner底部和侧面的边界？

编辑：更新了 CSS，因为我讨厌人们在 SO 上发布临时网站：

div.hero-unit {
    background: url(../img/ribbon-center.png) repeat-x;
    border-radius: 0;
    margin: 0 -15px;
    padding: 30px;
    float: left;
}

div.hero-container:before {
    content: url(../img/ribbon-fold-left.png);
    float: left;
    margin-left: -30px + -48px + 15px; /* - Padding size (30px) - image width (48px) + margin (15px) */
}


div.hero-container:after {
    content: url(../img/ribbon-fold-right.png);
    background: transparent;
    float: right;
    margin-right: -48px + -15px; /* - image-width (48px) - margin (15px) */
}

HTML：

<div class="hero-container">
    <div class="hero-unit">content</div>
</div>
4

1 回答 1

1

一种选择是在 .. 上使用负的右边距div.hero-container::after。我在 Firebug 中玩过它，15px 似乎是正确的。我不确定为什么图像没有与右侧对齐。

Aside: does anyone know what is causing the border around the bottom and sides of navbar-inner?

.navbar-inner那是不是边框上的盒子阴影

于 2013-04-16T23:23:25.230 回答