Question

我刚刚启动了一个基本的MVC 4应用程序，我很难弄清楚如何使两个div出现在块中而不是彼此相邻。在我的_Layout.cshtml文件中，我有body标记的以下代码：

<body>
    <div style="width: 60%; margin: 0 auto; display: block">
        <div id="header">
            <div class="headerImage" style="height: 200px; width: 150px; float: left"></div>
        </div>

        <div id="body" style="display: block">
            @RenderBody()
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

headerImage类：

.headerImage
 {
     background: url('@Url.Content("~/Content/Images/foo.jpg")');
     background-repeat:no-repeat;
     background-size:100%;
 }

现在，在我的Index.cshtml视图中，它会作为@RenderBody()的一部分呈现，我有一个简单的按钮：

<div>
    @using (Html.BeginForm("action", "controller"))
    {
        <input type="submit" value="hello world" />
    }
</div>

当我运行此按钮时，按钮位于图像旁边，即使它们位于不同的div中：

enter image description here

我甚至尝试在div上设置display:block，但这也没有帮助。知道怎么做吗？

Answer 1

您似乎需要清除第二个<div>，如下所示：

#body {
    clear: both;
}

有关清除花车的更多信息，请访问CSS Tricks

问题制作被阻止的分裂

1 个答案: