вертикально смещенные CSS столбцы со смешанной текстовой структурой - PullRequest
Новая
       33

вертикально смещенные CSS столбцы со смешанной текстовой структурой

0 голосов
/ 21 января 2020

Я генерирую html код, который должен быть помещен в два столбца div: 

 <!DOCTYPE html>
    <head>
    <meta charset="utf-8" />
    <style>
    .legendext{ column-count:2; column-gap:10pt; text-indent:0.0cm; margin-left:1.0cm; margin-right:1.0cm;}
    </style>
    <body>
    <figure>
    <div class="legendext">
    <dl>
    <dt><span>Definition 1</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    <ul>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    <li>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </li>
    </ul>
    </dd>
    <dt><span>Definition 2</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </dd>
    <dt><span>Definition 3</span></dt>
    <dd>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </dd>
    </dl>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
    </div>
    <figcaption>Figure : My figure.</figcaption>
    </figure>
    </head>

По непонятной причине мои столбцы не выровнены по вертикали (сбалансированы) следующим образом:

enter image description here

Я посмотрел на эту топи c Вертикально смещен CSS Столбцы и попытался изменить мой код в соответствии с ответом, но он не дает ожидаемого результата:

enter image description here

Список в двух столбцах правильно сбалансирован, но остальная часть моего текста не отображается в двух столбцах.

Этот ответ должен работать с одним упорядоченным списком, а не со смешанной структурой тегов html, как в моем коде.

Кто-нибудь знает, что не так с моим кодом и как правильно сбалансировать мои столбцы?

1 Ответ

0 голосов
/ 22 января 2020 
*{
        margin: 0px;
    }
.legendext
{ 
    column-count:2; 
    column-gap:10pt; 
    text-indent:0.0cm; 
    margin: 5rem;
    }
    .legendext dd {
        margin: 2.5rem 0rem;
    }


    p {
        margin: .5rem 0rem;
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<figure>
<div class="legendext">
<dl>
<dt><span>Definition 1</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
<ul>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
<li>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</li>
</ul>
</dd>
<dt><span>Definition 2</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</dd>
<dt><span>Definition 3</span></dt>
<dd>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</dd>
</dl>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dolor eu velit dignissim vulputate.</span></p>
</div>
<figcaption>Figure : My figure.</figcaption>
</figure>

</body>

</html>
...