个人中心
gpt4 book ai didi

html - Shift
block 外

转载 作者：太空宇宙 更新时间：2023-11-04 06:58:57 31 4
gpt4 key购买 nike

我有以下 Razor View 

@{
    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;
}

这给了我

Have

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

Want

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

最佳答案

我的建议是使用元素的绝对定位。你需要修改一些东西 - 包装 block - 在你的情况下 .container 元素应该有“position:relative” - 这将允许你在容器内“移动”部分标题。正如您所知道的 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;
        }

关于html - Shift <div> block 外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52223869/

31 4 0
文章推荐： java - 斐波那契数列代码 : JAVA
文章推荐： java - 如何为 @Async 方法使用自定义执行器？
文章推荐： java - java打印文本前面多余的空格
文章推荐： python - 如何检查python目录中是否只存在txt文件？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com