Question

我有三个柔印箱彼此相邻。它们看起来都一模一样：图片，标题和一些文字。出于某种原因，如果其中一个标题变得太长并且包裹，则文本与底部对齐。

max_delta = 50    
delta = df1['colname'].diff().shift(-1).abs()
delta.iloc[-1] = delta.iloc[-2]
df1 = df1[(delta < max_delta)]

有一个带有fullScreenMenu类的div。这是我的CSS：

<div class="flex" data-bind="foreach:  { data: menuItems }">
    <div class="leBorderContainer" data-bind="click: $data.clickEvent">
        <img data-bind="attr: {src: $data.imageUrl}" src="img/btn/fragezeichen.svg">
        <h2 data-bind="text: $data.header">Dokumentenzentrum</h2>
        <section data-bind="template: { nodes: $($data.content), data: $root }"><p>Hier finden Sie alle wichtigen Dokumente, Formulare und Publikationen von Lechner.</p></section>
    </div>

    <div class="leBorderContainer" data-bind="click: $data.clickEvent">
        <img data-bind="attr: {src: $data.imageUrl}" src="img/btn/suche.svg">
        <h2 data-bind="text: $data.header">Montage- und Pflegeanleitungen</h2>
        <section data-bind="template: { nodes: $($data.content), data: $root }"><p>Klicken Sie hier, um alle unsere Montage- und Pflegeanleitungen auf einen Blick zu finden. Sie werden auf unsere Homepage weitergeleitet.</p></section>
    </div>

    <div class="leBorderContainer" data-bind="click: $data.clickEvent">
        <img data-bind="attr: {src: $data.imageUrl}" src="img/btn/suche.svg">
        <h2 data-bind="text: $data.header">Broschüren und Kataloge</h2>
        <section data-bind="template: { nodes: $($data.content), data: $root }"><p>Finden Sie hier eine Übersicht aller unserer Broschüren und Kataloge. Sie werden auf unsere Homepage weitergeleitet.</p></section>
    </div>
</div>

有没有人有想法，如何让h2文本在多行情景中与顶部对齐？现在，“Dokumentenzentrum”文本从第二行开始，而“Montage- und Pflegeanleitungen”以及“BroschürenundKataloge”都是两行的。

使用flexbox对齐标题到顶部

0 个答案: