Question

我真的很难放置div标签。我需要将带有黄色边框的表单框放到右边，我的文本Inbound Marketing和subtext在中间。有人可以帮我解决这个问题吗？

文字位于带绿色边框的div中。

背景图片位于带红色边框的div中

这是我到目前为止所尝试的代码。我的代码如下所示：

HTML：

  <div class="top-area" style="border: 4px solid red;">
        <div class="container" style="border: 4px solid green;">
           <div class="form-container" style="border: 4px solid yellow;">
                <div>
                    @Umbraco.RenderMacro("Ebook")
                </div>
            </div>
            <h1 class="header-xl center">
                  @Html.Raw(headerText)
            </h1>
            <p class="sub-header center">
                 @Html.Raw(CurrentPage.imageTeaserText)
            </p>
        </div>
   </div>

CSS

.top-area {
    position: relative;
    text-align: center;
}

    .top-area, .top-area > .container {
        min-height: 500px;
        display: -ms-flexbox;
        display: flex;
    }

        .top-area > .container {
            -ms-flex-align: center;
            align-items:center;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .top-area p {
            margin: 0;
            color: #fff;
            width: 100%;
        }

        .top-area .header-xl {
            margin-top: 20px;
            padding: 0;
        }

        .top-area .sub-header {
            font-weight: 300;
            margin-top: 5px;
            font-size: 2.8em !important;
        }

.form-container {
    display: block;
    float: right;
    float: right;
    padding: 20px 0;
    width: 320px;
}

Answer 1

我不完全确定我清楚你在这里尝试做什么，但是你可以在你的display: block;项目上使用.top-area > .container来移动它在绿色容器内向右。如果您希望它在绿色容器的外部和红色容器的右侧，那么您需要在HTML中移动它。现在，它包含在带有绿色边框的div中，而不是红色边框。

浮动div元素吧

1 个答案: