<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css" > .left-box { width: 1344px; height: 880px; background-color: skyblue; float: left; } .right-box { width: 360px; height: 880px; /* background-color: orange; */ float: right; border: 0.5px solid #999; } div .qr-block { margin: 20px; } div .qr-title { font-family: '思源黑体'; font-size: 28px; font-weight: 600; line-height: 42px; margin-bottom: 16px; } #icon { width: 32px; vertical-align: middle; } #qrcode { width: 312px; vertical-align: middle; margin-bottom: 16px; border: #256294 4px solid; } .font-botton { width: 320px; text-align: center; margin-bottom: 16px; color: #666; } input { display: inline-block; height: 38px; width: 318px; border-radius: 4px; align-items: center; font-size: 24px; font-weight: 600; } #use-it { background-color: #256294; color: #fff; border: #256294 1px solid; } #change { background-color: #fff; color: #256294; border: #256294 1px solid; margin-top: 8px; } </style> <title>QRCode Qurey</title> </head> <body> <div class="left-box">1</div> <div class="right-box"> <div class="qr-block"> <div class="qr-title"> <img src="https://nasofcori.fun:9000/qrcode/qr/1470981902416.png" alt="" id="icon"> <span>FIT_110211</span> </div> <img src="https://nasofcori.fun:9000/qrcode/qr/1470981902416.png" alt="qrcode" id="qrcode"> <div class="font-botton"> <img src="#" alt=""> <span>Download Pic</span> <span>丨</span> <img src="#" alt=""> <span>Export CSV</span> </div> <input type="submit" value="USE IT" id="use-it"> <input type="submit" value="CHANGE" id="change"> </div> </div> </body> </html>