Question

我正在寻找一个带div的功能区：在psuedo-elements和3 pictures之前和之后。 Here's the site now，托管在我的家庭服务器上。我得到了：在图像工作之前，但我似乎无法得到：在图像后对齐到右侧。（请don't link to css-tricks，他们使用纯CSS，我是在图像之后！）

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

除此之外：有没有人知道是什么导致了navbar-inner底部和侧边的边界？

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

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>

Answer 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上的方框阴影不是边框

使用图像和CSS </div>在<div>上绘制功能区

1 个答案: