内联图像和 h (HTML/CSS)

Question

我想将个人资料图片与其用户名内嵌对齐。这是代码：

<div id="post">
    <div class="proPic">
        <img title="proPic" alt="Profile Picture" src="">
    </div>
    <h3>Username</h3>
    <p>Text post</p>
</div>

最好的方法是什么？我想同时查看 HTML 和 CSS 方法。

Answer 1

这是一个使用的代码比您已有的版本少的版本；）

body {
font-family: arial;
}

.profile {
width: 25%;
float: right;
background: pink;
}

.profile h3 {
margin: 0;
padding: 0;
font-size: 14px;
min-height: 50px; /*Just for demo*/
}

.content {
width: 70%;
float: left;
background: #ccc;
min-height: 200px; /*Just for demo*/
}

<div class="post">
 <div class="profile">
 <img title="proPic" alt="Profile Picture" src="">
 <h3>Username</h3>
 </div>
 <div class="content">
  Text post
 </div>
</div>

内联图像和 h (HTML/CSS)

In-line image and h (HTML/CSS)

html

css

inline

image