0

这就是我想要的chicklet 盒子的样子：！[] 1 出于某种原因，我不能使用负边距让twitter 图像进入盒子的中心。我的亲子关系有问题吗？

我的 css 在外部工作表中，但这里是：

<style type="text/css">

#chicklet_container {
    margin:20px auto 0px auto;
    width:540px;
    height:215px;
}

#chicklet_box {
    margin:0px 0px 10px 0px;
    width:190px;
    height:160px;
    border-style:solid;
    border-width:33px 5px 5px 5px;
    border-color:#45BA88;
    position:relative;
}

#chicklet_box2 {
    margin:-30px 0px 10px 0px;
    width:190px;
    height:160px;
    border-style:solid;
    border-width:0px 0px 30px 0px;
    border-color:#3f4040;
}

#chicklet_text {
    text-align:center;
    margin:-196px 0px 0px 0px;
    color:#FFF;
    width:190px;
    font-family:"Verdana, Geneva, sans-serif";
    font-size:27px;
    line-height:20px;
}

#chicklet_text2 {
    text-align:center;
    margin:139px 0px 0px 0px;
    color:#FFF;
    width:190px;
    font-family:"Proxima, Nova, Ultralight";
    font-size:26px;
    line-height:20px;
}

#chicklet_box img {
    margin:-250px 0px auto 5px;
}
</style>

这是html：

<div id="chicklet_container">
    <div id="chicklet_box">
        <div id="chicklet_box2">
        </div>
            <div id="chicklet_text">Follow Me</div>
            <div id="chicklet_text2">@soandsoandso</div>
            <img src="images/twitter.jpg" alt="">
    </div>
</div>
4

2 回答 2

0

为什么要使用这么多边距来对齐 twitter 鸟图像或文本。使用尽可能低的边距。取而代之的是，尝试使用该图像position:absolute;和 top ,left 属性。会更干净。但是要记住的一件事是，如果您对元素使用绝对位置，请检查其外部或父元素是否已定位，如果不是，则情况可能会变得更糟，并且该子元素可能会去其他地方。

于 2013-04-04T20:14:43.143 回答
0

负边距不是 hack - W3C 甚至说：“允许边距属性为负值......”

阅读更多：http ://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

在这种情况下，我确实同意，尽管它们可能被过分强调了。

为什么在 Chicklet Box 1 内有 Chicklet Box 2？我假设每个框都代表一个图标......我错了吗？

于 2014-04-30T15:18:30.867 回答