Question

我遇到以下问题：我的网站有一个非常大的 DIV元素，其中有一个 img （sullsize）。在主索引站点上，我希望在 DIV 中使用名为Palette的“站点标题”，而不是在外部。当我尝试使用 Flex CSS 时，图像将不会结束（填充元素）。

“我的团队网站”

所以我目前的问题是，我无法将调色板文本放入项目中，我也将列出个人的照片和作业说明，每个都有自己的 flexbox ，所以它会表现得对。如上所述，我无法让他们在框内。

最简单的方法是看看我的（样本）网站：

LINK（它应该在主站点上看起来像。甚至可以使用 Flex，而不是老式的方式）
Dashed Orange：Text Box
Dashed Red：未来的Team Div（每人1人）

这是CSS的基本HTML和部分（仅限部分！），请查看网站上的其他内容：

  .content_item .content_title {
            position: relative;
            overflow: visible;
            display: inline-block;
            height: 100%;
            width: 45%;
            float: right;

            flex-grow: 1;
            flex-shrink: 1;
        }

        .content_item h2 {
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
            padding-left: 20px;
            width: 100px;

            flex-grow: 1;
            flex-shrink: 1;

            color: rgba(255, 255, 255, .9);
            white-space: nowrap;
            letter-spacing: 1px;
            font-size: 5em;

            -ms-transform: rotate(270deg);
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

<body>
    <div class="site_palette">

            <div class="header_div">
                <h1 class="header_title">Schwarz & Torf Maler AG</h1>
                <h3 class="header_subtitle">Wir Malen wo andere nur zuschauen</h3>
            </div>

        <div class="flex_container">
            <a href="index.html">
                    <div class="content_item shadowbox_red">
                        <img src="http://maler1.calmarsolutions.ch/images/center_3.jpg" />
                        <div class="team_section">
                            <div class="team_part">
                                <img src="">
                            </div>
                        </div>
                        <div class="content_title">
                            <h2>Palette</h2>
                        </div>
                    </div>
            </a>
        </div>

    </div>

</body>

Answer 1

弹性容器为.content_item。

此容器有三个子项（弹性项）：

img
div.team_section
div.content_title

由于它们是三个 in-flow 弹性项目，它们相互尊重并且不重叠。

您想要在图片上叠加的文字位于绝对定位的h2，这是一个相对定位.content-title的孩子。

您需要做的是将position: relative添加到主容器，然后应用position: absolute非图像弹性项目。

将此添加到您的代码中：

.site_palette .content_item {
    position: relative;
}
.team_section {
   position: absolute;
}

/* adjustment below may be unnecessary */
.content_item .content_title {
   /* position: relative; */
   position: absolute;
   right: 0;
}

Answer 2

.site_palette .content_item {
    max-width: 70vw;
    position: absolute;
}

.team_section {
    display: flex;
    position: absolute;
}

Answer 3

在css中找到以下代码：

.team_section {
   display: flex;
}

并将其更改为：

.team_section {
   display: none;
}

CSS Flex - 将div添加到另一个div / box中

“我的团队网站”

3 个答案: