0

我在 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 预设了边距和填充，当您缩小窗口时，文字不再与图像对齐。

谢谢！

4

0 回答 0