如图,一个网页的顶部区域,左边显示公司logo,右边显示当前登录的用户信息。
红色部分靠左,绿色靠右,蓝色高度未写死,和子元素保持一致。
完整代码:
b1 的 overflow解决 其子元素 float 之后自身高度丢失的问题
b1 和 b3 的 posotion 用于使 b3居中,详细可以参看:https://blog.csdn.net/wuzhong8809/article/details/119838076
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
.b1 {
width: 600px;
background-color: royalblue;
overflow: hidden;