Как я могу разделить первого дочернего элемента на столбец во всю длину слева и отобразить остальные дочерние элементы справа? - PullRequest
Новая
       145

Как я могу разделить первого дочернего элемента на столбец во всю длину слева и отобразить остальные дочерние элементы справа?

0 голосов
/ 07 августа 2020

Я хочу отобразить первый элемент тега <aside> с центром слева. Все остальные элементы должны отображаться справа.

Я использую инструмент (asciidoctor-html5s) для преобразования asciido c в html5. Поэтому я не могу изменить HTML.

Это сгенерированный HTML: 

<aside class="admonition-block tip" role="doc-tip">
    <h6 class="block-title">
        <span class="title-label">Tip: </span>
        Info
    </h6>
    <p>Go to this URL to learn more about it:</p>
    <div class="ulist">
        <ul>
            <li><a class="bare" href="http://asciidoc.org">http://asciidoc.org</a></li>
        </ul>
    </div>
    <p>Or you could return to the <a href="#first">First Steps</a> or <a href="#purpose">Purpose</a>.</p>
</aside>

А это пример того, как это должно выглядеть:

целевой взгляд

Возможно ли это, и если да, то как?

Пожалуйста, не сосредотачивайтесь на тексте Info внутри h6. Я знаю, что это невозможно. Вопрос в том, чтобы первый элемент был слева, а все n остальных элементов - справа.

Ответы [ 2 ]

1 голос
/ 07 августа 2020

Если ваш HTML будет именно таким (например, h6, p, div, а затем еще p), то вы можете жестко закодировать его, используя комбинация стилей CSS Grid и CSS Flexbox: 

aside {
    display: grid;
    grid-template-columns: 50px 320px; /* picked these sizes at random; feel free to change */
    grid-gap: 5px; /* picked these sizes at random; feel free to change */
}
aside > * {
    grid-column: 2;
}
h6 {
    grid-column: 1;
    grid-row: 1 / 5;
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
}
h6 span {
    visibility: visible;
}
p::before {
    content:"Info";
    position: absolute;
    top: 5px;
    font-style: italic;
}
aside p:first-of-type {
    grid-row: 1;
}
aside div {
    grid-row: 2;
}
aside p:last-of-type {
    grid-row: 3;
}
<aside class="admonition-block tip" role="doc-tip">
    <h6 class="block-title">
        <span class="title-label">Tip: </span>
        Info
    </h6>
    <p>Go to this URL to learn more about it:</p>
    <div class="ulist">
        <ul>
            <li><a class="bare" href="http://asciidoc.org">http://asciidoc.org</a></li>
        </ul>
    </div>
    <p>Or you could return to the <a href="#first">First Steps</a> or <a href="#purpose">Purpose</a>.</p>
</aside>

Я спрятал текстовый узел «Информация» в разметке и добавил его в CSS как псевдоэлемент. Его нельзя выбрать таким образом, но его можно позиционировать так, как вы хотите.

Возможно, в вашем программном обеспечении конвертера есть способ запретить такие узлы с открытым текстом (считается плохой практикой иметь atomi c текст, не заключенный в элемент, если вы хотите стилизовать / выбрать его).

1 голос
/ 07 августа 2020

Вы можете использовать float: left и немного стили для height и margin-right

.admonition-block .block-title {
  float: left;
  margin-right: 2rem;
  height: 4rem;
}
<aside class="admonition-block tip" role="doc-tip">
  <h6 class="block-title">
    <span class="title-label">Tip: </span>
    Info
  </h6>
  <p>Go to this URL to learn more about it:</p>
  <div class="ulist">
    <ul>
      <li><a class="bare" href="http://asciidoc.org">http://asciidoc.org</a></li>
    </ul>
  </div>
  <p>Or you could return to the <a href="#first">First Steps</a> or <a href="#purpose">Purpose</a>.</p>
</aside>
...