Когда в CSS3 установлен столбец, дочерний элемент div отображается вне следующего столбца - PullRequest
Новая
       14

Когда в CSS3 установлен столбец, дочерний элемент div отображается вне следующего столбца

0 голосов
/ 30 мая 2019

Layout Screenshot

Выше приведен скриншот моего личного проекта.Я пытаюсь сделать веб-тест по математике и хочу, чтобы columns на ней.

Прямо сейчас, страница использует 'https://github.com/cognitom/paper-css'.

Ниже приведен код .. 

<section class="sheet padding-15mm">
    <div class="head background-1">
        <div class="column-2">
            <div name="name">name</div>
            <div name="date">date</div>
        </div>
        <div class="column-6">
            <div name="testname">ITSM Report & Feedback</div>
        </div>
        <div class="column-2">
            <div name="logo">logo</div>
            <div name="organization">org</div>
        </div>
    </div>

    <div class="body">
        <div class="problem problem-3">1</div>
        <div class="problem problem-3">2</div>
        <div class="problem problem-3">3</div>
        <div class="problem problem-3">4</div>
        <div class="problem problem-3">5</div>
    </div>
</section>

и связанные с ними фрагменты css .. 

div.head { height: 5em; border: 3px solid black; border-radius: 8px; padding: .5em; position: relative; }
div.head.background-1::after { content:''; top:0; left:0; bottom:0; right:0; position: absolute; z-index: 1; background-image: url({{asset('background-1.png')}}); opacity: 0.15;}
div.head > div { float: left; }
div.column-2 { width: 20%; }
div.column-6 { width: 60%; }
div[name="name"] { background-color: white; }
div[name="testname"] { font-size: 1.5em; margin-top: .75em; text-shadow: 5px 5px 3px rgba(0,0,0,0.5); }

div.body { position: relative; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; column-rule-style: groove; column-gap: 3em; }
div.head + div.body { height: calc(100% - 7em - 3px); margin-top: 1em; }
div.problem { position: static; width: 100%; }

div.head + div.body div.problem-3 { height: 30%; }
div.problem-2 { height: 50%; }
div.problem-3 { height: 33%; }
div.problem-4 { height: 25%; }

В настоящее время я не могу найти причину, по которой div.problem.problem-3 выходит из родительского деления.

...