Question

我是HTML和CSS的新手，我想知道如何使用多行文本内联我的图像。

这是我目前的HTML代码：

<div class="row">
    <div class="columnPhoto">
        <div class="profile">
            <img id="profilePic" src="profile_pic.png" alt="Profile Picture" />
        </div>
    </div>
    <div class="columnContent">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
    </div>
</div>

和我的CSS代码：

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.columnPhoto{
    float: left;
    width: 25%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.profile{
    border: 5px solid #333;
    width: 215px;
    height: 215px;
    margin-left: 80%;
    margin-bottom: 20px;
}

#profilePic{
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

.columnContent{
    float: left;
    width: 75%;
    position: relative;
    min-height: 1px;
    margin-top: -10%;
    padding-right: 15px;
    padding-left: 20%;
    vertical-align: middle;
}

符合本网站“我的个人资料”部分的风格：http://turqmelon.com/

我正在使用的测试网站是http://arhsjtest.weebly.com/，它使用的是我现在使用的相同代码。问题在于，由于我为columnContent预设了边距和填充，当缩小窗口时，单词不再与图像对齐。

谢谢！

使用多行文本内嵌图片[HTML / CSS]

0 个答案: