调整 Flexbox 中的元素无法正常工作

问题描述 投票：0回答：1

我正在尝试调整 Flexbox 容器内的过滤器下拉列表。但由于某种原因，第一行的前两列总是会移动。这让我发疯。我还尝试使用间隙而不是边距，但由于某种原因，Wordpress（或 Kadence 主题）不适用于间隙。 它看起来是这样的： 布局截图

这是 HTML：

<header class=woocommerce-products-header><div
class=wpc-custom-selected-terms><ul
class="wpc-filter-chips-list wpc-filter-chips-3528-1 wpc-filter-chips-3528 wpc-empty-chips-container" data-set=3528 data-setcount=3528-1></ul></div><div
class="widget widget_wpc_filters_widget"><div
class="wpc-filters-main-wrap wpc-filter-set-3528" data-set=3528><div
class="wpc-filters-open-button-container wpc-open-button-3528">
<a
class="wpc-open-close-filters-button wpc-show-counts-yes" href=javascript:void(0); data-wid=3528><span
class=wpc-button-inner><span
class=wpc-icon-html-wrapper>
<span
class=wpc-icon-line-1></span>
<span
class=wpc-icon-line-2></span>
<span
class=wpc-icon-line-3></span>
</span>
<span
class=wpc-filters-button-text>Filter</span></span></a></div><div
class=wpc-spinner></div><div
class="wpc-filters-widget-content wpc-show-counts-yes"><div
class=wpc-widget-close-container>
<a
class=wpc-widget-close-icon>
<span
class=wpc-icon-html-wrapper>
<span
class=wpc-icon-line-1></span><span
class=wpc-icon-line-2></span><span
class=wpc-icon-line-3></span>
</span>
</a><span
class=wpc-widget-popup-title>Filter</span></div><div
class=wpc-filters-widget-containers-wrapper><div
class=wpc-filters-widget-top-container><div
class=wpc-widget-top-inside><div
class=wpc-inner-widget-chips-wrapper><ul
class="wpc-filter-chips-list wpc-filter-chips-3528-2 wpc-filter-chips-3528 wpc-empty-chips-container" data-set=3528 data-setcount=3528-2></ul></div></div></div><div
class=wpc-filters-scroll-container><div
class=wpc-filters-widget-wrapper><div
class=wpc-instead-of-posts-found></div><div
class="wpc-filters-section wpc-filters-section-3531 wpc-filter-koffein wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-1 wpc-filter-visible-term-names" data-fid=3531><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Koffein</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-koffein"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3531">   <li
class="wpc-checkbox-item wpc-term-item wpc-term-count-1 wpc-term-id-3" id=wpc-term-post_meta-koffein-3><div
class=wpc-term-item-content-wrapper><input
type=checkbox data-wpc-link=https://example.com/shop/product-category/fruechte/koffeingehalt-0/ id=wpc-checkbox-post_meta-koffein-3>
<label
for=wpc-checkbox-post_meta-koffein-3><a
href=https://example.com/shop/product-category/fruechte/koffeingehalt-0/ >0</a>&nbsp;<span
class=wpc-term-count>(<span
class=wpc-term-count-value>1</span>)</span>
</label></div>
</li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3532 wpc-filter-aromen_fruchtig wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3532><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Fruchtige Noten</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-aromen_fruchtig"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3532"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3533 wpc-filter-pflanzliche_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3533><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Pflanzliche Noten</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-pflanzliche_aromen"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3533"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3535 wpc-filter-nussige_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3535><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Nussige Noten</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-nussige_aromen"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3535"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3541 wpc-filter-suse_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible  wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3541><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Süße Noten</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-suse_aromen"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3541"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3536 wpc-filter-krauterige_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible  wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3536><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Kräuterige Noten</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-krauterige_aromen"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3536"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3537 wpc-filter-wurzige_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3537><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Würzige Noten</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-wurzige_aromen"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3537"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3540 wpc-filter-winter wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible  wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3540><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Winter / Weihnachts-Tees</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-winter"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3540"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3538 wpc-filter-eistee wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3538><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Geeignet als Eistee<span
class=wpc-help-tip data-tip="Tees, die auch kalt gut schmecken"></span></span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-eistee"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3538"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3539 wpc-filter-mild__saurearm wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3539><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Mild / Säurearm</span><span
class=wpc-open-icon></span></button></div></div><div
class="wpc-filter-content wpc-filter-mild__saurearm"><ul
class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3539"><li>Es gibt noch keine Filterbegriffe&nbsp;<span
class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li></ul></div></div><div
class="wpc-filters-section wpc-filters-section-3528s wpc-filter-layout-search-field" data-fid=3528s><div
class=wpc-filter-header><div
class="widget-title wpc-filter-title">
Gefilterte Produkte durchsuchen</div></div><form
action=https://example.com/shop/product-category/fruechte/ role=search method=GET class=wpc-filter-search-form><div
class="wpc-search-field-wrapper wpc-search-field-wrapper-3528s">
<span
class=wpc-search-icon></span>
<input
type=text class=wpc-search-field placeholder value name=srch>
<span
class=wpc-search-clear-icon-wrapper>
<a
class=wpc-search-clear-icon href=https://example.com/shop/product-category/fruechte/ title="Suche löschen">&#215;</a>
</span></div></form></div></div></div><div
class=wpc-filters-widget-controls-container><div
class=wpc-filters-widget-controls-wrapper><div
class="wpc-filters-widget-controls-item wpc-filters-widget-controls-one">
<a
class="wpc-filters-apply-button wpc-posts-loaded" href=https://example.com/shop/product-category/fruechte/ >Anwenden <span
class=wpc-filters-found-posts-wrapper>(<span
class=wpc-filters-found-posts>1</span>)</span></a></div><div
class="wpc-filters-widget-controls-item wpc-filters-widget-controls-two">
<a
class=wpc-filters-close-button href=https://example.com/shop/product-category/fruechte/ >Abbrechen </a></div></div></div><div
class=wpc-edit-filter-set>Filter Set</div></div></div></div></div></header>

这是它的 CSS：

/* Background color for the entire widget */
.wpc-filters-widget-wrapper {
    background-color: #6C7159; /* Light background color for the widget */
    padding: 20px; /* Padding to make the widget more spacious */
    border-radius: 8px; /* Slightly rounded corners */
    margin-bottom: 20px; /* Space below the widget */
    display: flex; /* Flex container for filters */
    flex-wrap: wrap; /* Distribute elements across multiple rows */
    justify-content: space-between;
    align-items: start; /* Align elements at the top */
}

/* Styling for individual filter sections */
.wpc-filters-section {
    width: 30%;
    margin-bottom: 20px !important; /* Space below each filter section */
    margin-right: 2%; /* Space between columns */
    padding: 15px; /* Padding within each filter section */
    border: 1px solid #ccc; /* Thin border around each filter */
    border-radius: 5px; /* Slightly rounded corners */
    box-sizing: border-box; /* Include padding and border in width calculation */
    background-color: #ECEBE3;
    position: relative; /* To position the dropdown arrow absolutely */
}

/* Last filter in the row has no right margin */
.wpc-filters-section:nth-child(3n) {
    margin-right: 0 !important;
}

/* Styling for the title in the filter */
.wpc-filters-section .widget-title-wrapper {
    display: flex;
    align-items: center; /* Vertically center the text */
    width: 100%; /* Ensure the entire space is used */
    padding-right: 25px; /* Reserve space for the arrow */
}

/* Correct positioning of the dropdown arrow on the right */
.wpc-filters-section select {
    appearance: none; /* Remove platform-specific styles for select */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    padding-right: 30px; /* Space for the arrow */
    width: 100%; /* Full width */
    position: relative; /* Base positioning for the arrow */
}

.wpc-filters-section::after {
    position: absolute; /* Absolutely positioned within the filter */
    right: 10px; /* Positioning to the right within the filter box */
    top: 50%; /* Vertical center */
    transform: translateY(-50%); /* Exact vertical centering */
    pointer-events: none; /* Ensure the arrow is not clickable */
}

/* Focus effect when a filter is selected or clicked */
.wpc-filters-section:hover {
    border-color: #999; /* Change border color on hover */
    background-color: #ffffff; /* Lighter background on hover */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
}

/* Styling for mobile devices */
@media (max-width: 768px) {
    .wpc-filters-section {
        width: 100%; /* On mobile, filters should be displayed in full width */
        margin-right: 0 !important; /* No space between columns on small screens */
    }
}

您有什么想法吗？为什么会发生变化以及如何解决？

这是我们迄今为止尝试过的：
我们尝试了多种方法来解决 Flexbox 布局中过滤器框未对齐的问题：

  1. Flexbox宽度调整：最初，我们使用flex-basis调整盒子宽度，并添加间隙来控制间距。然而，Wordpress 环境不支持gap。

  2. 针对特定框的针对性调整：然后，我们使用 nth-child(1) 和 nth-child(2) 来针对前两个框手动设置 margin-right。这使布局变得更糟，导致间距不一致。

  3. 手动间距和宽度调整：我们尝试消除间隙并使用边距，并设置宽度：calc(32% - 10px)以实现均匀分布。这仍然没有解决错位问题。

    谢谢你。

    托比亚斯

html css flexbox alignment margin
1个回答
0
投票

我认为你应该尝试下面的CSS属性，它们相当于gap。

网格间隙：10px 10px； // grid-row-gap 和 grid-column-gap 属性的简写属性

或

网格行间距：10px； 网格列间隙：10px；

或

行距：10px； 列间距：10px；

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.