html - 圆形图像周围的文字

Question

我有一个圆形图像，我希望文字就在它周围。任何想法？

有关信息，这是我正在谈论的页面，我希望左侧的文本与图像的左侧相匹配。

http://vincentandre.fr

Answer 1

我创建了一个 jsfiddle，展示了如何使用定位、z 索引和 BR 标记的混合使用非常冗长的方法来做到这一点。

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;
}