布局左右风格的样式框架

<template>
  <div
    id="wrapper"
    class="wrapper flex-center-stretch flex-column"
    style="height: 200px; background-color: whitesmoke;margin-bottom: 20px"
  >
    <div>占比分析</div>
    <el-row style="display: flex">
      <div class="table_con" style="margin-right: 2%">
        123
      </div>
      <div class="table_con">
        abc
      </div>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'RatioAnalyse',
  components: {
  },
  data () {
    return {
    }
  },
  computed: {
  },
  watch: {
  },
  created () {
  },
  async mounted () {
  },
  methods: {
  }

}
</script>
<style scoped>
.table_con{
  width: 49%;
  background-color: #fff;
}
</style>

这部分代码使用了作为外部容器，然后在这个容器内包含了两个

元素，分别具有类名 “table_con”。这两个

元素被设置为占据容器的宽度，并且左侧的

元素带有右边距（margin-right），它们形成了左右布局。

在这个布局中，左侧的

元素包含文本 “123”，右侧的

元素包含文本 “abc”。这两个元素共同构成了左右布局的结构。

<el-row style="display: flex">
  <div class="table_con" style="margin-right: 2%">
    123
  </div>
  <div class="table_con">
    abc
  </div>
</el-row>