Question

我的渲染体内容在左侧浮动侧栏下方消失了。我试图通过打开visual studio提供的默认互联网网页模板来弄清楚我的css究竟出了什么问题，我可以看到他们使用媒体查询来改变较小尺寸屏幕上的风格。我试图做同样但看到绝对没有变化:(

要查看操作中的问题，您一定可以访问我的开发网站。如果使窗口宽度变小，您将看到问题。 (problem seen here)

这是我的布局视图的标记

@model gcaMusicExchange.ViewModels.ViewModelBase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/chosen.css" rel="stylesheet" />
@Scripts.Render("~/bundles/jquery")
@*<script src="~/Scripts/jquery.min.js"></script>*@
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>


<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

<script src="~/Scripts/chosen.jquery.js"></script>
<script src="~/Scripts/jquery.slider.min.js"></script>

@Scripts.Render("~/bundles/modernizr")







<!--[if !IE 7]>
<style type="text/css">
    #wrap {display:table;height:100%}
</style>
<![endif]-->

</head>
<body>


<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">
                <img height="70px" style="margin-left:-300px; margin-top:-10px" src="~/Images/jdmxchange.jpg" /></p>
        </div>
        <div class="float-right">
            <section id="login">
                @Html.Partial("_LoginPartial")
            </section>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </nav>
        </div>
    </div>
</header>


<div class="sidebar ">
    <div id="commandControls" class="navbar-leftside-content">
        <div id="firstBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
        <h1 style="color:#1C75B8">Performance Parts</h1>
        @Html.ActionLink("Browse all parts", "Index", "ResultsList")
        <br />
        <br />
        @Html.ActionLink("Browse by vehicle application", "PerformancePartsByVehicle", "Browse")
        <br />
        <br />
        @Html.ActionLink("Browse by part category", "PerformancePartsByCategory", "Browse", null, null)
        <br />
        <br />
        @Html.ActionLink("Browse by part manufacturer", "PerformancePartsByManufacturerLetter", "Browse", null, null)
        </div>
        <div id="secondBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
        <h1 >Vehicle Listings</h1>

        @Html.ActionLink("Browse all vehicles", "Index", "VehicleListings", null, null)
        <br />
        <br />   
        @Html.ActionLink("Browse custom builds", "Index", "VehicleListings", null, null)    
        <br />
        <br />
        @Html.ActionLink("Browse shells", "Index", "VehicleListings", null, null) 
        </div>
        <div id="thirdsBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
        <h1>Account</h1>
      @*  @Html.ActionLink("Mechanical", "ShellBuilds", "Browse", null, null)      
        <br />
        <br />
        @Html.ActionLink("Cosmetic", "ShellBuilds", "Browse", null, null)      
        <br />
        <br />
        @Html.ActionLink("Electrical", "ShellBuilds", "Browse", null, null)      
        <br />
        <br />
        @Html.ActionLink("Computer", "ShellBuilds", "Browse", null, null)      
        <br />
        <br />
        @Html.ActionLink("Driving", "ShellBuilds", "Browse", null, null)      
        <br />
        <br />
        @Html.ActionLink("Misc", "ShellBuilds", "Browse", null, null)      
        <br />
        <br />*@
        @Html.ActionLink("Post a part for sale", "Index", "VehicleSelect", null, null)
        <br />
        <br />
            Post a vehicle for sale
         @*@Html.ActionLink("Post a vehicle for sale", "Create", "ItemPost", null, null)*@
        <br />
        <br />
        @*If the user is currently logged on*@
        @if (User.Identity.IsAuthenticated)
        {
            @Html.ActionLink("View your posts", "DisplayMyPosts", "Account", null, null)
            <br />
            <br />
            @Html.ActionLink("View your purchases", "MyPurchases", "Account", null, null)
            <br />
            <br />
            @Html.ActionLink("Messages", "Index", "Message", null,null)
            <br />
            <br />
            <span>Favorites</span>
            @*@Html.ActionLink("Notables", "NotablesMain")*@
            <br />
            <br />
            <span>Notifier</span>@*
            @Html.ActionLink("Agent", "AgentConfig")
            *@<br />
            <br />
            <span>Account Settings</span>
            @*@Html.ActionLink("Account Settings", "Settings")*@
        }
        else
        {
            <br />
            <br />
        }
        </div>
        <div id="fourthBlock" style="background-color:#FFFFFF; padding:10px; border-radius:3px;margin-top:15px">
        <h1>Events and Meets</h1>

        </div>
    </div>
</div>
<div>
    @RenderSection("featured", required: false)
</div>
<div id="body">
    <section class="content-wrapper clear-fix">
        @RenderBody()
    </section>

</div>







@RenderSection("scripts", required: false)

我认为您可以在浏览器中看到源代码中的css，而不是发布我的CSS（它很大）。

为什么我的身体被推到我的侧栏下？

0 个答案: