如何像专业前端开发者实现Div并排浮动及右上角定位？

我希望像专业前端开发者那样实现Div并排浮动，但遇到问题：仅用float:right只能让.pfmr-info类的Div右移，无法到达主容器的右上角。当前代码如下：

现有CSS代码 #

html {
    width: 100%;
    height:100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans', sans-serif;
    background-color: #1b1b1b;
}

.container {
    background-color: #313131;
    width: auto;
    height: calc(100%-30%);
    padding: 20px;
}
.img-wrapper {
    width: 144px;
    height: 216px;
}

img {
    width: 100%;
    height: 100%;
}
.pfmr-info {
    float: right;
}

现有HTML代码 #

<div class="container">
 <div class="img-wrapper">
     <picture>
         <source 
         srcset="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" media="(orientation: portrait)" />
         <img 
         src="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" alt="Cherie Deville" />
       </picture>
 </div>
 <div class="pfmr-info">
     <span style="color: #848484;font-size: medium;">Cherie Deville</span>
 </div>
</div>

解决方案 #

方法1：调整浮动元素的HTML顺序（基于float布局） #

浮动元素的排版受DOM顺序影响，把右浮动的.pfmr-info放到.img-wrapper前面，就能让它贴到容器右上角，同时和左侧图片并排：

修改后的HTML：

<div class="container">
 <div class="pfmr-info">
     <span style="color: #848484;font-size: medium;">Cherie Deville</span>
 </div>
 <div class="img-wrapper">
     <picture>
         <source 
         srcset="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" media="(orientation: portrait)" />
         <img 
         src="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" alt="Cherie Deville" />
       </picture>
 </div>
</div>

方法2：使用Flexbox布局（现代前端推荐方案） #

Flexbox是更灵活的布局方式，无需依赖浮动，直接通过容器属性控制元素位置：

修改后的CSS：

html {
    width: 100%;
    height:100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans', sans-serif;
    background-color: #1b1b1b;
}

.container {
    background-color: #313131;
    width: auto;
    height: calc(100% - 30%); /* 修复calc语法：运算符前后需加空格 */
    padding: 20px;
    display: flex; /* 启用Flex布局 */
    justify-content: space-between; /* 两端对齐，实现左右元素分开 */
    align-items: flex-start; /* 让元素顶部对齐 */
}
.img-wrapper {
    width: 144px;
    height: 216px;
}

img {
    width: 100%;
    height: 100%;
}
/* 移除原float属性 */

HTML无需修改，.pfmr-info会自动贴到容器右上角，同时和左侧图片保持并排。

方法3：使用绝对定位（适合精确固定位置） #

如果需要让.pfmr-info固定在右上角，不受其他元素影响，可使用绝对定位：

修改后的CSS：

html {
    width: 100%;
    height:100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans', sans-serif;
    background-color: #1b1b1b;
}

.container {
    background-color: #313131;
    width: auto;
    height: calc(100% - 30%); /* 修复calc语法 */
    padding: 20px;
    position: relative; /* 让子元素绝对定位基于容器 */
}
.img-wrapper {
    width: 144px;
    height: 216px;
}

img {
    width: 100%;
    height: 100%;
}
.pfmr-info {
    position: absolute;
    top: 20px; /* 和容器padding值一致，贴到顶部 */
    right: 20px; /* 和容器padding值一致，贴到右侧 */
}

内容的提问来源于stack exchange，提问作者santosh shah