见下图。请注意,左右边框没有填充可用空间。这些是嵌套的 div。我如何让它服从汽车?
CSS 类 MiddleLeftBorder 和 MiddleRightBorder 未按预期工作。
CSS代码如下:
html, body
{
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
body
{
background-color: #000000;
background-image: url('/CatwalkCloset/App_Themes/Default/Images/Background.jpg');
background-repeat: repeat;
color: #FFFFFF;
}
/* TEMPLATE */
container
{
height: auto;
margin: auto;
width: 100%;
}
div.content
{
clear: both;
height: auto;
margin: 0px auto;
text-align: center;
width: 1024px;
}
div.rows div.row
{
clear: both;
width: 1024px;
}
div.rows div.column
{
float: left;
}
div.rows div.clear-row
{
line-height: 0px;
font-size: 0px;
clear: both;
}
div.logo
{
background: url('/CatwalkCloset/App_Themes/Default/Images/Logo.jpg');
height: 150px;
width: 510px;
}
div.logoSpace
{
background-color: #000000;
}
div.menu
{
background: url('/CatwalkCloset/App_Themes/Default/Images/MenuBackground.jpg');
background-repeat: repeat;
height: 40px;
width: 1024px;
}
div.topLeftBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/TopLeftBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
div.topMiddleBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/TopMiddleBorder.jpg');
background-repeat: repeat;
float: left;
height: 40px;
width: 944px;
}
div.topRightBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/TopRightBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
div.middleLeftBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/MiddleLeftBorder.jpg');
background-repeat: repeat;
float: left;
height: 100%;
width: 40px;
}
div.middleContent
{
float: left;
height: 100%;
width: 944px;
}
div.middleRightBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/MiddleRightBorder.jpg');
background-repeat: repeat;
float: left;
height: 100%;
width: 40px;
}
div.bottomLeftBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/BottomLeftBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
div.bottomMiddleBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/BottomMiddleBorder.jpg');
background-repeat: repeat;
float: left;
height: 40px;
width: 944px;
}
div.bottomRightBorder
{
background: url('/CatwalkCloset/App_Themes/Default/Images/BottomRightBorder.jpg');
float: left;
height: 40px;
width: 40px;
}
下面的 HTML 代码使用上面的 CSS 代码:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="cphMasterHead" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="fMaster" runat="server">
<div id="container">
<div class="content">
<div class="rows">
<div class="row">
<div class="logo"></div>
<div class="logoSpace"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="menu"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="topLeftBorder"></div>
<div class="topMiddleBorder"></div>
<div class="topRightBorder"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="middleLeftBorder"></div>
<div class="middleContent"><asp:ContentPlaceHolder id="cphMasterBody" runat="server"></asp:ContentPlaceHolder></div>
<div class="middleRightBorder"></div>
<div class="clear-row"> </div>
</div>
<div class="row">
<div class="bottomLeftBorder"></div>
<div class="bottomMiddleBorder"></div>
<div class="bottomRightBorder"></div>
<div class="clear-row"> </div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>