Container 布局容器

基本用法

常见布局

示例代码

<template>
  <div>

    <t-container class="wrapper">
      <t-header clsss="header">header</t-header>
      <t-main clsss="main">main</t-main>
    </t-container>

    <t-container class="wrapper">
      <t-header clsss="header">header</t-header>
      <t-main clsss="main">main</t-main>
      <t-footer clsss="footer">footer</t-footer>
    </t-container>

    <t-container class="wrapper">
      <t-aside clsss="aside">aside</t-aside>
      <t-main clsss="main">main</t-main>
    </t-container>

    <t-container class="wrapper">
      <t-header clsss="header">header</t-header>
      <t-container>
        <t-aside clsss="aside">aside</t-aside>
        <t-main clsss="main">main</t-main>
      </t-container>
    </t-container>

    <t-container class="wrapper">
      <t-header clsss="header">header</t-header>
      <t-container>
        <t-aside clsss="aside">aside</t-aside>
        <t-container>
          <t-main clsss="main">main</t-main>
          <t-footer clsss="footer">footer</t-footer>
        </t-container>
      </t-container>
    </t-container>

    <t-container class="wrapper">
      <t-aside clsss="aside">aside</t-aside>
      <t-container>
        <t-header clsss="header">header</t-header>
        <t-main clsss="main">main</t-main>
      </t-container>
    </t-container>

    <t-container class="wrapper">
      <t-aside clsss="aside">aside</t-aside>
      <t-container>
        <t-header clsss="header">header</t-header>
        <t-main clsss="main">main</t-main>
        <t-footer clsss="footer">footer</t-footer>
      </t-container>
    </t-container>
  </div>

</template>

<style scoped>
div {
  text-align: center;
}

.wrapper {
  height: 100px;
  margin-bottom: 20px;
}

.header, .footer {
  background-color: #B3C0D1;
  height: 20px;
}

.aside {
  background: #D3DCE6;
}

.main {
  background-color: #E9EEF3;
}
</style>