Question

我有以下剃刀视图

@{
    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做到这一点？

Answer 1

我的建议是使用元素的绝对定位。您需要修改一些东西-包装块-在您的情况下.container元素应具有“ position：relative”-这将使您可以“移动”容器中的section-title。并且您知道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;
        }

移位<div>外块

1 个答案: