0

我有一个带有垂直放置在页面中心部分的 div 的 HTML 页面。 在此处输入图像描述 *注意：它只包含中心而不是两侧的 div。

我的要求是，当我重新调整页面大小时，中心 div 应该保持不变，而两侧应该越来越薄，直到中心 div 是唯一可见的东西。听起来很复杂？请检查下面的链接。

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="TestMasterPage.master.cs" Inherits="WebApplication4.TestMasterPage" %>


<!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 id="Head1" runat="server">

    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style media="screen" type="text/css">

        #header
        {
        margin-top:0;
        margin-bottom:0;
        margin-left:8.0em;
        margin-right:8.0em;
        min-width:800px;
        height:25px;
        background-color:#303033;
        border:solid 1px #CCC;
        }

        #menuBar1
        {
        margin-top:0px;
        margin-bottom:0px;
     margin-left:8.0em;
        margin-right:8.0em;
       min-width:800px;
        min-height:2px;       
        }

         #menuBar2
        {
        margin-top:0px;
        margin-bottom:5px;
       margin-left:8.0em;
        margin-right:8.0em;
        min-width:800px;
        min-height:20px;
        background-color:#F5F5F5;
        border:solid 1px #CCC;

        }

         #mainContentArea
        {
        margin-top:5px;
        margin-bottom:0px;
        margin-left:8.0em;
        margin-right:8.0em;
        min-width:800px;
        height:100px;
        background-color:#F5F5F5;
        border:solid 1px #CCC;
        }

         #interfaceArea1
        {
        margin-top:0px;
        margin-bottom:0px;
      margin-left:8.0em;
        margin-right:8.0em;
        min-width:800px;
        height:20px;
        background-color:#F5F5F5;
        border:solid 1px #CCC;
        }

         #contentArea1
        {
        margin-top:0px;
        margin-bottom:0px;
     margin-left:8.0em;
        margin-right:8.0em;
        min-width:800px;
        height:80px;
        background-color:#F5F5F5;
        border:solid 1px #CCC;
        }

        #contentArea2
        {
        margin-top:0px;
        margin-bottom:0px;
  margin-left:8.0em;
        margin-right:8.0em;
        min-width:800px;
        height:80px;
        background-color:#F5F5F5;
        border:solid 1px #CCC;
        }

        #footer
        {
        margin-top:5px;
        margin-bottom:0px;
  margin-left:8.0em;
        margin-right:8.0em;
        min-width:800px;
        height:35px;
        background-color:#303033;
        border:solid 1px #CCC;
        }



      ul
{
list-style-type:none;
padding:0;
overflow:hidden;
margin-top:0;


}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#303033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#CCC;
}

    </style>

</head>
<body>


    <div id="header">

    </div>    

    <div id="menuBar1">
   <ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Applications</a></li>
<li><a href="#contact">Webservice</a></li>
<li><a href="#about">Android</a></li>
<li><a href="#about">.NET</a></li>
<li><a href="#about">Other</a></li>

</ul>
    </div>

    <div id="menuBar2">

    </div>

     <div id="mainContentArea">

    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>

    </div>

    <div id="interfaceArea1">

    </div>

    <div id="contentArea1">

    </div>

    <div id="contentArea2">

    </div>

    <div id="footer">

    </div>

</body>
</html>
4

2 回答 2

1

查看 CSS 媒体查询并阅读有关响应式设计的信息。

您可能还想在中心设置宽度divs。

于 2013-01-21T14:18:25.860 回答
1

如果您希望内容保持在中间，则不应设置 amin-width而应设置为 fixedwidth或 a max-width。将此与auto左右边距相结合，这将告诉浏览器将内容居中。例如这个设置：

body {
    max-width: 800px; /* can also be "width" depending on your requirements */
    margin-left: auto;
    margin-right: auto;
}

在上面的示例中，我将其应用于body元素，但基本上您可以使用任何块元素（在您的情况下*内容 div 之一）执行此操作。

这种布局还有很多其他示例。例如，ironmyers 布局具有您似乎想要的这种单列固定宽度布局。

* 注意：您并没有完全轻松地在您的上下文中说出答案，因为您提供的代码不是一个sscce，有很多不相关的标记。

于 2013-01-21T14:55:05.670 回答