0

我的布局工作正常，直到for collectorsdiv 换行。此时，后续的what artists are sayingdiv 不会被推到被包裹的内容之下。有谁知道为什么？

我尝试将align-content“收藏家”弹性框设置为各种设置。

PS 使用 Tailwind.css

显示元素未包装的时间

未包装：

在此处输入图像描述

显示元素何时被包裹

包装时：

在此处输入图像描述

HTML

    <!-- for artist-for collectors -->
        <div class="for-artists-and-collectors flex flex-wrap">

            <div class="flex justify-start h-full bg-red">

                <div class="for-container flex flex-col justify-center w-full h-full bg-black px-8">
                    <h2 class="text-white pb-2">For Artists</h2>
                    <div class="text-sm text-white text-left pb-4">
                        I want to auction my artwork using K****o
                    </div>
                    <k-button style="height: 40px;">Create Account -></k-button>
                </div>

                <div class="for-artists-bg h-full flex-grow flex-shrink"></div>

            </div>

            <div class="flex justify-start h-full bg-green">

                <div class="for-container flex flex-col justify-center w-full h-full bg-gray px-8">
                    <h2 class="text-white pb-2">For Collectors</h2>
                    <div class="text-sm text-white text-left pb-4">
                        I want to discover & bid on original artwork
                    </div>
                    <k-button style="height: 40px;">Browse Auctions -></k-button>
                </div>

                <div class="for-collectors-bg h-full flex-grow flex-shrink"></div>

            </div>

        </div>
        <!-- /for artist-for collectors -->

        <!-- what artists are saying -->
        <div class="flex content-between">

            <div class="waas flex flex-col items-end">

                <h2 class="text-black waas-title text-right mb-6">
                    What artists are saying
                </h2>

                <div class="waas-controls flex">
                    <k-button 
                        style="height: 40px; width: 40px;" 
                        color="white"
                        class="mr-2">
                        <left-arrow-black />
                    </k-button>
                    <k-button style="height: 40px; width: 40px;">
                        <left-arrow-white class="right-arrow" />
                    </k-button>
                </div>

            </div>

            <div class="artist-profile">

            </div>
        </div>

风格

.for-artists-and-collectors {
    height: 220px;
}

.for-artists-and-collectors > div {
    flex:  1 1 50%;
    min-width: 300px;
}

.for-artists-bg {
    background-image: url("https://images.unsplash.com/photo-1482245294234-b3f2f8d5f1a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80");
    background-position: center center;
}

.for-collectors-bg {
    background-image: url("https://images.unsplash.com/photo-1536574753884-8c45a0431ecf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80");
    background-position: center center;
}

.for-container {
    max-width: 220px;
}
4

1 回答 1

1

当在父元素上设置绝对高度，然后在子元素上设置百分比高度时，就会出现问题。在我不知道任何其他也会导致问题的测量组合。

密码笔

问题与 解决方案

简化问题

<div class="parent">
  <div class="child-1">child 1</div>
  <div class="child-2">child 2</div>
</div>

<div class="other">Other div</div>

-

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 80px;
}

.parent > div {
  flex: 1 1 50%;
  min-width: 300px;
  height: 100%; /* this is the problem */
}

.child-1 {
  background-color: red;
}

.child-2 {
  background-color: green;
}

.other {
  width: 100px;
  height: 100px;
  background-color: orange;
}

解决方案

/* removed parent height */
.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent > div {
  flex: 1 1 50%;
  min-width: 300px;
  height: 50px; /* set an absolute height here */
}
于 2019-01-24T04:43:21.707 回答