1、使用div标签创建一个模块，在div内，再使用div标签创建两个模块，并分别设置div标签的class属性和id属性。。
2、在css标签内，通过class或id分别定义div的宽度和高度、背景颜色。
3、在css标签内，再设置最外层div为flex布局，并通过align-items属性设置div内两个div垂直方向居中对齐，通过justify-content属性设置div内两个div水平方向两端对齐。
img元素不要用定位属性，否则都会向左上对齐； 如果要定位IMG，就把IMG装进一个DIV，在DIV里面加white-space:nowrap;和position:relative;top:100%;，然后把这个DIV再装进一个1px高度的父DIV，这样就可以看着是底部对齐了； 如果上面方法不满意，就直接用TABLE元素装吧，这个对页面的垂直布局的控制很方便
首先打开html软件
方法1：利用标签的align属性
align 属性规定元素中的内容的水平对齐方式，值设置为right可右对齐内容。
方法2：利用标签的style属性添加右对齐样式
style 属性规定元素的行内样式（inline style）。
这样在html中就使图片做到右对齐
1、div左对齐条件与方法只需要对要靠左对齐（局左）的div样式加float:left即可，这里新建一个html文件，创建一个div容器并给它一个class属性，容器里面是两个div，一个靠左对齐，一个靠右，以示区别：
2、接下来设置css样式，在style标签中，设置div的float值为left，就实现左对齐了，最后在给div高度，宽度，边框属性设置值，右边的div除了float设为right，其他都是一样的：
3、最后来到浏览器中，可以看到div在浏览器中是居左的，另一个是居右的：