完成flex布局与float布局

float布局

float 的两栏布局和三栏布局

两栏布局


<body>
	<div style="width: 800px;height: 200px;">
		<div style="float: left;background: red;width: 200px;height: 100%;">
	　　	左
		div>
		<div style="background: blue;margin-left: 200px;height: 100%;padding-left: 10px;">
	　　	右
		div>
	div>
body>

三栏布局


html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>floattitle>
head>
 
<body>
  <div style="width:800px;height:200px;">
    <div style="float:left;background:red;width:200px;height:100%;">
      左
    div>
    <div style="float:right;background:blue;width:200px;height:100%;">
      右
    div>
    <div style="background:yellow;width:400px;margin-left: 200px;height:100%;">
      中
    div>
  div>
body>

效果图

flex布局


html>
<html>
<head>
  <style>
    .container {
      display: flex;
    }
 
    .column {
      flex: 1;
      padding: 20px;
    }
 
    .column:first-child {
      background-color: #f2f2f2;
    }
  style>
head>
<body>
  <div class="container">
    <div class="column">
      <p>This is the left column.p>
    div>
    <div class="column">
      <p>This is the right column.p>
    div>
  div>
body>
html>

效果图

相关阅读:
静电监控在半导体行业中的应用
Advances in Graph Neural Networks笔记4：Heterogeneous Graph Neural Networks
淘宝/天猫获取卖出的商品订单列表 API
Material Design控件之 CardView
一、高频题集
前端开发——HTML5新增加的表单属性
实验七循环神经网络（3）LSTM的记忆能力实验
Ubuntu-虚拟机常见问题
【mujoco】Ubuntu20.04配置mujoco210
Qt Drag&Drop拖动与放置

原文地址：https://blog.csdn.net/weixin_64747212/article/details/132994043