0

我得到了一个混乱的网站，如下所示。 图片

我的 _Layout.cshtml 代码是：

<!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")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>

<div id="wrap">
    @RenderBody()
    <header>
        <h1>Document Heading</h1>
        <div id="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>
                <li>@Html.ActionLink("Sermon", "Sermon", "Home")</li>
            </ul>
        </div>
    </header>
    <div id="main-content">

        <h2>Column 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="sidebar">
        <h2>Column 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </div>
    <footer>FOOTER</footer>

</div>

视图很简单：

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

和 CSS：

body
{
   background-color: #FFCC99;
   border-top: solid 10px #000;
   color: #333;
   font-size: .85em;
   font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
   margin: 0;
   padding: 0;
}

#nav
{
  float: left;
}
/* menu
----------------------------------------------------------*/
ul#menu
{
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 5px;
  padding: 0;
  text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
    padding-left: 15px;
}

    ul#menu li a
    {
        background: none;
        color: #999;
        text-decoration: none;
    }

        ul#menu li a:hover
        {
            color: #333;
            text-decoration: none;
        }

header
{
    background-color: #7ac0da;
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    color: #3e5667;
    padding: 20px 40px 30px 40px;
}

#main-content
{
   float: left;
   width: 75%;
}

#sidebar
{
  float: right;
  width: 25%;
}

我想要的是修改 CSS 来解决问题。

  • 第 1 列的宽度需要为 25%，第 2 列的宽度需要为 75%。它不适用于 CSS。
  • 页脚不在真正的底部位置。
4

1 回答 1

0

页脚没有出现在底部的原因是没有清除浮动。在页脚中添加 aclear: both将解决问题。

于 2013-06-10T20:13:41.973 回答