Проекты с открытым исходным кодом > Other Open Source > Books/Manuals/Tutorials &&

В избранное Ответвления

OSCHINA-MIRROR/lhammer-You-need-to-know-css

Присоединиться к Gitlife

Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)

Присоединиться бесплатно

Клонировать/Скачать

holy-grail-layout.md 1.8 КБ

# Святой чашей (Holy Grail) макет

Этот макет обычно требует равной ширины двух боковых колонок и центральной колонки с адаптивной шириной.

<vuep template="#holy-grail-layout"></vuep>

<script v-pre type="text/x-template" id="holy-grail-layout">
<style>
  main {
    width: 100%;
    padding: 39px 29px;
    font-size: 12px;
  }
  section {
    padding: 0 129px;
    box-shadow: 0 0 0 1px #eee;
  }
  section::after {
    content: '';
    display: block;
    clear: both;
  }
  section > div {
    height: 229px;
    line-height: 1.5em;
    padding: 29px 12px;
    text-align: center;
    float: left;
    color: white;
    background: #b4a078;
  }
  section .left, section .right {
    position: relative;
    width: 119px;
  }
  section .left {
    left: -129px;
    margin-left: -100%;
  }
  section .center {
    width: 100%;
    text-align: justify;
    hyphens: auto;
  }
  section .right {
    left: 129px;
    margin-left: -119px;
  }
  /* ползунок */
  input[type="range"] {
    width: 100%;
    cursor: ew-resize;
  }
</style>
<template>
  <main class="main">
    <input ref="range" type="range" value="100">
    <section :style="{width: width + '%'}">
      <div class="center">Парафраз заполнительного текста. Лала ла де дах де дах де дах де ла.</div>
      <div class="left">левый</div>
      <div class="right">правый</div>
    </section>
  </main>
</template>
<script>
  module.exports = {
    data () {
      return {
        width: 100
      }
    },
    mounted() {
      const self = this;
      this.$refs.range.oninput = function () {
        self.width = 60 + this.value * 0.4;
      }
    }
  }
</script>
</script>

Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История

Отправлено 10.03.2025 04:31 b50c8d4

Святой чашей (Holy Grail) макет

Этот макет обычно требует равной ширины двух боковых колонок и центральной колонки с адаптивной шириной.

<script v-pre type="text/x-template" id="holy-grail-layout"> <style> main { width: 100%; padding: 39px 29px; font-size: 12px; } section { padding: 0 129px; box-shadow: 0 0 0 1px #eee; } section::after { content: ''; display: block; clear: both; } section > div { height: 229px; line-height: 1.5em; padding: 29px 12px; text-align: center; float: left; color: white; background: #b4a078; } section .left, section .right { position: relative; width: 119px; } section .left { left: -129px; margin-left: -100%; } section .center { width: 100%; text-align: justify; hyphens: auto; } section .right { left: 129px; margin-left: -119px; } /* ползунок */ input[type="range"] { width: 100%; cursor: ew-resize; } </style>

Парафраз заполнительного текста. Лала ла де дах де дах де дах де ла.

левый

правый

<script> module.exports = { data () { return { width: 100 } }, mounted() { const self = this; this.$refs.range.oninput = function () { self.width = 60 + this.value * 0.4; } } } </script> </script>

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1

https://api.gitlife.ru/oschina-mirror/lhammer-You-need-to-know-css.git

git@api.gitlife.ru:oschina-mirror/lhammer-You-need-to-know-css.git

oschina-mirror

lhammer-You-need-to-know-css

lhammer-You-need-to-know-css

master