1

我想实现类似于下图的东西（我的文章 DIV 之外的 2 个图标、邮件和电话（图像上为白色），与 DIV 的顶部对齐并在彼此下方（具有 1 或 2 像素空间） .我尝试为图像设置一个负边距的类，但没有成功。实现这一目标的最佳方法是什么？非常感谢

在此处输入图像描述

.article {
    clear: right;
    float: right;
    text-align:justify;
    width: 450px;
    min-height:420px;
    height: 60%;
    padding: 50px 32px 49px 62px;
    margin-right:75px;  
    position: relative;
    z-index: 15;
    margin-top: 90px;
    background: #fff;
    /* max-width: 25%; */
    overflow-y: scroll!important;
}
4

1 回答 1

2

我会position: relative在文章上使用并position: absolute在图标集上定位（为简单起见，我使用了 a ul）：

JSFiddle：http: //jsfiddle.net/szLsH/

HTML 代码：

<article>
    <div id="icons">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac libero velit. Proin euismod erat non diam malesuada ac semper purus dapibus. Donec id suscipit metus. Ut eu auctor mauris. Proin sed felis dui. Maecenas congue dapibus dolor, sodales feugiat nisi feugiat ac. Nulla nec massa in mi pharetra sollicitudin. Aliquam eu dui quis odio porttitor viverra ut cursus dui. Nullam quis tristique magna. Aliquam erat volutpat. Suspendisse potenti. Pellentesque rhoncus commodo odio vitae tincidunt. Praesent rutrum, nibh vitae porta luctus, felis quam dignissim risus, non tempus lectus magna non odio. Donec commodo laoreet dolor ut volutpat. Ut lobortis lobortis augue, in placerat arcu dapibus et. Maecenas vitae lectus quis enim suscipit euismod.
    </p>
</article>

CSS：

article {
    width: 200px;
    margin: 0 auto;
    position: relative;
    padding: 10px;
    border: 1px solid #AAA;
}

#icons {
    position: absolute;
    right: 100%;
    top: 0;
}
#icons ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#icons li {
    width: 50px;
    height: 50px;
    background: blue;
    margin: 0 5px 5px;
}
于 2013-05-11T16:15:03.850 回答