css右侧自适应 |使用css样式样式美化表单

.example {
width: 100%;
display: flex;
}
.left {
width: 70%;
height: 500px;
background-color: #f6f6f6;
}
.right {
width: 30%;
height: 500px;
background-color: #e6e6e6;
}

如上述代码，大家定义了一个类名为example的元素，并将其宽度设为100%，同时设置display:flex，将该元素内所有子元素排列成一行。其中，大家将左侧元素（类名为left）宽度设为70%，将右侧元素（类名为right）宽度设为30%。这样就可以实现右侧自适应的布局，无论用户采用的是什么尺寸的设备，右侧元素都会以30%的宽度自适应地适应不同的分辨率和屏幕尺寸。

需要注意的是，CSS的自适应布局不仅仅限于右侧自适应，还可以根据具体的设计需要自由调整布局。例如，如果需要实现左右分栏的布局，则可以将左侧元素宽度设为50%，右侧元素宽度也设为50%。如此一来，左右两侧的元素在不同的屏幕尺寸和分辨率下，都能够完美地适应页面的布局需求。