1

下の図に似たものを実現したいと思います (2 つのアイコン、記事 DIV の外側のメールと電話 (画像では白)、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、アイコン セットで配置します (ul簡単にするために a を使用しました)。

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 に答える