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ではなく、固定widthまたは のいずれかを設定する必要がありmax-widthます。autoこれを左右の余白と組み合わせて、コンテンツを中央に配置するようブラウザに指示します。たとえば、このセットアップ：

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

上記の例では要素に適用しましたbodyが、基本的には任意のブロック要素 (この場合は * コンテンツ div の 1 つ) でこれを行うことができます。

この種のレイアウトには、他にも多くの例があります。たとえば、ironmyers レイアウトには、この 1 列の固定幅レイアウトがあります。

* 注: あなたが提供したコードはsscceではなく、無関係なマークアップがたくさんあるため、コンテキストで答えを簡単に表現することは正確ではありません。

于 2013-01-21T14:55:05.670 に答える