html - 円形の画像の周りのテキスト

Question

円形の画像があり、その周りにテキストを配置したいと考えています。何か案が？

情報については、これが私が話しているページです。左側のテキストを画像の左側と一致させたいと思います。

http://vincentandre.fr

Answer 1

ポジショニング、z-indexing、および BR タグを組み合わせて使用​​する非常に長い方法を使用してこれを行う方法を示す jsfiddle を作成しました。

http://jsfiddle.net/wynGy/1/

<div class="container">
    <img src="http://vincentandre.fr/images/photo2.png" alt="" width="640">
    <div class="text">
        <p>Born in 1981 in the west end of France, in the town<br>
            of Plougastel Daoulas, near Brest. I spent my<br>
            childhood always playing out with my<br>
            friends, building and re-building stuffs, I<br>
            rapidly discovered a vivid interest for<br>
            the technology. I was fortunate<br>
            enough to be able to study as per<br>
            my interest.</p>

        <p>Twenty three years later, an<br>
            engineer degree from<br>
            ENSAM in my hands, I<br>
            started a career that drove<br>
            me further East, from<br>
            Paris, to Romania for<br>
            some business trips, then<br>
            China where the repeated<br>
            trips became a full time<br>
            expatriation in Shenzhen.<br>
            Having built my life and<br>
            family here, I am now<br>
            settled down in Hong-Kong.</p>

        <p>Besides my career, my<br>
            favorite hobby is to play the<br>
            photographer during the<br>
            week-end. My best shots are in<br>
            my gallery or on my Facebook<br>
            page.</p>

        <p>If you want to let me a small message,<br>
            feel free to do so.</p>
    </div>
</div>



.container {
    width:800px;
    background:#ccc;
    position:relative;
    overflow:hidden;
    min-height:640px;
}
.container img {
    position:absolute;
    right:0;
    top:0;
    z-index:1;
}
.container .text {
    position:relative;
    z-index:2;
}

p {
    margin:0 0 10px;
}