时间戳

首页 > 解决方案 > 将两个浮动 div 并排放置时未对齐 (HTML)

html - 将两个浮动 div 并排放置时未对齐 (HTML)

问题描述

我正在创建一个我的物流部门将使用的电源应用程序，并且我想创建一个 PDF 文档来充当“票务日志”。我正在使用 HTML 对其进行格式化，这是我到目前为止发现的代码如下。如果代码不好，请原谅。一切看起来都很好，除了我的 div 没有完全对齐而且我不知道为什么。任何帮助，将不胜感激。

<!DOCTYPE html>  
        <html>  
            <head>  
    
                <style>  
                    #leftbox { 
                        float:left;   
                        width:50%; 
                        font-size:18px;
                        height:50px;
                        text-align:center;
                    } 
        
                    #rightbox{ 
                        float:right;  
                        width:50%; 
                        font-size:18px;
                        height:50px;
                        text-align:center;
                    } 
                    h1{ 
                        color:green; 
                        text-align:center;
                        font-size:30px;
                    } 
                    h2{
                        text-align:center;
                        font-size:20px;
                    }
                    h3{
                        float:left;
                        text-align:left;
                        font-size:18px;
                        height:20px;
                        width:50%;
                    }
                    h4{
                        float:right;
                        text-align:left;
                        font-size:18px;
                        height:20px;
                        width:50%;
                   }  
                </style>  
            </head>  
            <body>  
                    <h1>Name of my company</h1>
                    <h2>The address of my company<br>
                    Phone Number<br>
                    Transportation Services Receipt
                    </h2>
                    
                <h3>Sold To:</h3>
                <h4>Job Site:</h4>
                <div id = "leftbox">
                    Company Name
                    <hr style="width:90%">
                    Company Address
                    <hr style="width:90%">
                    Company City, State, Zip Code
                    <hr style="width:90%">
                </div>
                
                <div id = "rightbox">
                    Company Name
                    <hr style="width:90%;text-align:center;margin-center:0">
                    Company Address
                    <hr style="width:90%;text-align:center;margin-center:0">
                    Company City, State, Zip Code
                    <hr style="width:90%;text-align:center;margin-center:0">
                </div>
            
            </body>  
        </html>

标签： html

解决方案

您需要将 更改<h4>为<h3>.

像这样： <h3>Sold To:</h3> <h3>Job Site:</h3>

推荐阅读