我正在寻找一个带div的功能区:在之前和之后:psuedo-elements和3张图片 这是现在的网站 ,托管在我的家庭服务器上。 我得到了:在图像工作之前,但我似乎无法得到:在图像后对齐到右侧。 (请不要链接到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>

===============>>#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上的盒子阴影而不是边框

  ask by Marco Pietro Cirillo translate from so

未解决问题?本站智能推荐:

关注微信公众号