Inicia sesión



pseudo element display: grid solution
<style>
  main {
    width: 100%;
    padding: 39px 29px;
    font-size: 12px;
  }
  section {
    display: grid;
    align-items: center;
    grid-template-columns: 45% 35% calc(20% - 2px);
    grid-column-gap: 1px;
    background: #eeeeee;
    box-shadow: 0 0 0 1px #eeeeee;
  }
  section > span {
    height: 100%;
    padding: 12px;
    display: grid;
    align-items: center;
    background: white;
  }
  .left {
    display: grid;
    grid-row-gap: 12px;
  }
  .left .item {
    text-align: center;
    line-height: 85px;
    background: rgba(180,160,120,.1);
  }
</style>

  <main class="main">
    <section>
      <span class="left">
        <div
          v-for="ele in elements"
          @click="handleClick"
          class="item">
          {{symbol}}
        </div>
      </span>
      <span class="center">vertical centering<br>vertical centering</span>
      <span class="right">vertical centering</span>
    </section>
  </main>

<script>
  export default {
    data () {
      return {
        elements: Array(2).fill(1),
        symbol: '➕'
      }
    },
    methods: {
      handleClick () {
        this.elements.length == 2 ? (_ => {
          this.elements.push(1);
          this.symbol = '➖';
        })() : (_ => {
          this.elements.pop();
          this.symbol = '➕';
        })()
      }
    }
  }
</script>
Ver resultado

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-11
  • Categorias: Diseño Web CSS3 html5 WebSite Tutorial

Diseño de orden de clase en CSS3 Diseño de orden de clase en CSS3...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!