时间戳

首页 > 解决方案 > 转移

外块

html - 转移
外块

问题描述

我有以下剃刀视图

@{
    ViewBag.Title = "UserCost";
}

<head>
    <link href="@Url.Content("~/Styles/products.css")" rel="stylesheet" type="text/css" />
</head>

<div class="home-main">

    <div class="full-width-div">
        <div class="container-fluid">
            <div id="usercost-banner" class="jumbotron" ></div>
        </div>
    </div>

    <div class="container-row bg-deep-blue">

        <div class="container">
            <div class="section-title">
                Why UserCost
            </div>
            <div class="row ">
                <div class="col-md-4 text-center">

                    <h2>Costing</h2>
                    <p>
                        Situation admitting promotion at or to perceived be. Mr acuteness we as estimable 
                        enjoyment up. An held late as felt know. Learn do allow solid to grave. Middleton 
                        suspicion age her attention. Chiefly several bed its wishing. Is so moments on 
                        chamber pressed to. Doubtful yet way properly answered humanity its desirous. 
                        Minuter believe service arrived civilly add all. Acuteness allowance an at eagerness 
                        favourite in extensive exquisite ye. <br /><br />
                    </p>
                    <p>
                        <a class="btn btn-outline-primary"
                            href="https://go.microsoft.com/fwlink/?LinkId=301865">
                            Learn more
                        </a>
                    </p>
                </div>
                <div class="col-md-4 text-center">

                    <h2>Groupers</h2>
                    <p>
                        Situation admitting promotion at or to perceived be. Mr acuteness we as estimable
                        enjoyment up. An held late as felt know. Learn do allow solid to grave. Middleton
                        suspicion age her attention. Chiefly several bed its wishing. Is so moments on
                        chamber pressed to. Doubtful yet way properly answered humanity its desirous.
                        Minuter believe service arrived civilly add all. Acuteness allowance an at eagerness
                        favourite in extensive exquisite ye. <br /><br />
                    </p>
                    <p>
                        <a class="btn btn-outline-primary"
                            href="https://go.microsoft.com/fwlink/?LinkId=301866">
                            Learn more
                        </a>
                    </p>
                </div>
                <div class="col-md-4 text-center">
                    <h2>Consultancy</h2>
                    <p>
                        Situation admitting promotion at or to perceived be. Mr acuteness we as estimable
                        enjoyment up. An held late as felt know. Learn do allow solid to grave. Middleton
                        suspicion age her attention. Chiefly several bed its wishing. Is so moments on
                        chamber pressed to. Doubtful yet way properly answered humanity its desirous.
                        Minuter believe service arrived civilly add all. Acuteness allowance an at eagerness
                        favourite in extensive exquisite ye. <br /><br />
                    </p>
                    <p>
                        <a class="btn btn-outline-primary"
                            href="https://go.microsoft.com/fwlink/?LinkId=301867">
                            Learn more
                        </a>
                    </p>
                </div>
            </div>
        </div>
</div>
</div>

与 products.css 作为

#usercost-banner {
    background-image: url("../Resources/Images/Pngs/Products/usercost_wide_banner3000x800.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
}

.full-width-div {
    width: 100%;
    left: 0;
}

.full-width-div .container-fluid {
    padding-left: 0rem;
    padding-right: 0rem;
}

sgv {
    height: 200px;
    width: 200px;
}

rect {
    fill: #0094ff;
}

.section-title {
    font: 600 12px/15px Gotham SSm A,Gotham SSm B,Helvetica,Arial,sans-serif;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    width: 120px;
    height: 120px;
    margin-top: -130px;
    margin-bottom: 64px;
    padding: 12px;
    background: #161616;
    text-transform: uppercase;
    color: #fff;
}

.container-row {
    height: auto;
    position: relative;
    width: 100%;
    left: 0;
}
.bg-deep-blue {
    background: #226695;
}

.bottom-row {
    margin-bottom: 80px;
}

这给了我

有

但我想要一些看起来像的东西

想

如何使用 HTML/CSS 实现这一点？

标签： htmlcss

解决方案

我的建议是使用元素的绝对定位。您需要修改一些东西 - 包装块 - 在您的情况下 .container 元素应该具有“位置：相对” - 这将允许您在容器内“移动”部分标题。正如您所知道的 section-title 元素的高度，您可以使用 margin-top: -50% 或 -60px 来获得“重叠”效果。

.container {
        position: relative;
    }

.section-title {
            font: 600 12px/15px Gotham SSm A,Gotham SSm B,Helvetica,Arial,sans-serif;
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            height: 120px;
            margin-top: -60px;
            background: #161616;
            text-transform: uppercase;
            color: #fff;
        }

推荐阅读