如何实现两个Div同行布局：左侧标题区与右侧图标区错位问题求助

我想制作一个头部(header)，其中包含一个带有标题(Title)和副标题(Subtitle)的div，放置在左上角；另一个包含图片的div与标题副标题在同一行，放置在右上角。但当前图片div始终处于第二行，无法与标题区同行。我尝试过设置float:right和display:inline，但都没有效果，恳请各位提供解决建议。

我的代码 #

HTML #

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="../styles/popup.css">
    <link href="https://db.onlinewebfonts.com/c/7200c6dd8ac604abe09f5159e53a40c0?family=Mark+Pro" rel="stylesheet">
</head>


<body>

    <div id="main-header-wrapper">
        <div id="main-header">
            <span id="main-header-1">Title</span> <span id="main-header-2">Subtitle</span>
        </div>

        <div id="icon_moreInfo">
            <img
                src="https://banner2.cleanpng.com/20180718/brv/kisspng-computer-icons-icon-design-encapsulated-postscript-more-info-icon-5b4fcee4e70c74.9013090315319569649464.jpg">
        </div>
    </div>


</body>

</html>

CSS #

html {
    width: 279px;
    height: 127x;
   background: #EEEEEE;
}

#body {
    width:100%;
}

#main-header {
    margin-left: 10px;
    margin-top: 12px;
}

#main-header-1 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #000000;
}

#main-header-2 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #5D5D5D;
}
.icon_moreInfo{
  width: 12px;
  height: 12px;
  float:right;
 }

img{
  height:12px;
  width:12px;
}

.main-header-wrapper{
  margin:0 auto;
}

解决方法 #

你当前的核心问题是CSS选择器匹配错误：

• HTML中图片容器的id是icon_moreInfo，但CSS里误用了类选择器.icon_moreInfo，应改为id选择器#icon_moreInfo
• 头部容器的id是main-header-wrapper，CSS里同样误用了类选择器.main-header-wrapper，应改为#main-header-wrapper

以下是两种可靠的修复方案：

方案一：修正选择器 + Float布局 #

调整后的CSS代码：

html {
    width: 279px;
    height: 127px; /* 修正原代码中的拼写错误127x为127px */
    background: #EEEEEE;
}

#main-header-wrapper {
    overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

#main-header {
    margin-left: 10px;
    margin-top: 12px;
    float: left; /* 标题区左浮动 */
}

#main-header-1 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #000000;
}

#main-header-2 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #5D5D5D;
}

#icon_moreInfo{
    width: 12px;
    height: 12px;
    float: right;
    margin-top: 12px; /* 和标题区保持一致的上边距 */
    margin-right: 10px; /* 添加右边距避免贴边 */
}

img{
    height:12px;
    width:12px;
}

方案二：Flex布局（现代简洁） #

用Flex布局可以更轻松实现两端对齐，无需依赖浮动：

html {
    width: 279px;
    height: 127px;
    background: #EEEEEE;
}

#main-header-wrapper {
    display: flex;
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 子元素垂直居中 */
    padding: 12px 10px 0; /* 统一内边距替代零散margin */
}

#main-header-1 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #000000;
}

#main-header-2 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #5D5D5D;
}

#icon_moreInfo{
    width: 12px;
    height: 12px;
}

img{
    height:12px;
    width:12px;
}

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