HTML页面布局实现求助：编码后页面样式排版与目标效果不一致

开发需求与当前现状 #

• 目标效果：需实现的页面布局参考
  
• 现存问题：编写的代码渲染效果与目标存在偏差，当前实际渲染效果参考
  
• 原始编写代码：

<! DOCTYPE Html>
<html>
<head><title>example2</title></head>
   <body>
   <h3 style="border-style: solid; width: 5%; text-align: top-center; float: center;"> YUCW</h3>
 
      <p style="text-align:left; border-bottom-style: solid;">
    MIS 343
    <span style="float:right;">
       principles of e-commerce
         <p style="text-align:left; border-bottom-style: solid;">
    Name: <i>Riyam</i>
    <span style="float:right;">
       midterm marks 24/25
        
    </span>
</p>

<p style="text-align:left;">
    Specialization : <i > MIS</i>
    <span style="float:right;">
      final marks 32/35
        
    </span>
</p>
   </body>
</html>

代码存在的核心问题 #

• 文档声明语法错误：<! DOCTYPE Html> 中DOCTYPE后多余空格、标签大小写不规范，不符合HTML标准写法，可能导致浏览器触发怪异渲染模式
• 无效样式属性：
  • text-align: top-center 不属于合法的文本对齐取值，浏览器无法识别生效
  • float: center 不属于合法的浮动取值，浮动仅支持left/right/none，无法实现水平居中效果
  • 标题设置width: 5%过窄，边框无法包裹完整文字内容，导致文字强制换行、边框变形
• HTML嵌套结构错误：第一个<p>标签未完成闭合就嵌套了第二个<p>标签，违反HTML块级元素嵌套规则，会导致浏览器自动修正DOM结构，出现排版错位
• 排版逻辑缺陷：仅靠单个float:right实现右对齐，未处理浮动元素的高度影响，会导致边框、行高错位，无法实现预期的整行两端对齐效果

修正后可直接使用的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>example2</title>
    <style>
        body {
            margin: 16px;
            font-size: 16px;
        }
        /* 顶部机构名块样式 */
        .org-block {
            border: solid 1px #000;
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 16px;
        }
        /* 通用行容器：实现左右两端对齐 */
        .info-row {
            display: flex;
            justify-content: space-between;
            border-bottom: solid 1px #000;
            padding: 6px 0;
        }
        /* 最后一行移除下边框 */
        .info-row:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="org-block">YUCW</div>

    <div class="info-row">
        <span>MIS 343</span>
        <span>principles of e-commerce</span>
    </div>

    <div class="info-row">
        <span>Name: <i>Riyam</i></span>
        <span>midterm marks 24/25</span>
    </div>

    <div class="info-row">
        <span>Specialization: <i>MIS</i></span>
        <span>final marks 32/35</span>
    </div>
</body>
</html>

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