<div> 中的 3 列

Question

我正在用 ASP.NET 做一个网站。我正在向您展示 MasterPage，我的 HTML 文件中的 <div style="width:100%; border:2px double #ff0000; height:500px;"> 将包含三列，其中我 divide 我的内容。左边10%，中间80%，右边10%。最后一个（右）是我遇到麻烦的地方。我已经为每个 div 设置了边框，所以我可以看到每个 div 的限制以及它们如何 divided。 第三列，不是放在右边，而是往下，在div的底部。 这是我想解决的第一个主要问题。

第二个问题是，在 80% 的 div 中，我希望所有信息都在中心，而不是 将 text-align:center; 放在中间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="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
            table 
            {
               -moz-border-radius:10px;
               -webkit-border-radius:10px;
                border-radius:10px;
            }
        </style>
    </head>
    <body style="margin-top:25px">
        <div style="width:100%; height:80px; border:2px solid #000000; z-index:4; text-align:center;">
            <div>
                <h1>Title</h1>
            </div>
        </div>
        <div style="width:100%; border:2px double #ff0000; height:500px;">
            <div style="width:10%; border:2px dotted #ffd800; height:100%; float:left;">

            </div>
            <div style="width:80%; border:2px dotted #b6ff00; height:100%; float:left;">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div style="float:left; border:5px dotted #ef8021; width:10%; height:100%;">
            </div>
        </div>
        <div style="bottom:0px; width:100%; height:75px; border:2px dashed #f117d2; z-index:0; text-align:center;">
            <div>
                <p>Visited <%=Application["mone"] %> people.</p>
                <p>Copyrights reserved.</p>
            </div>
        </div>
    </body>
</html>

谢谢！

Answer 1

<body style="margin-top:25px">
  <div style="width: 100%; height: 80px; border: 2px solid #000000; z-index: 4; text-align: center;">
    <div><h1>Title</h1></div>
  </div>
  <div style="width: 100%; border: 2px double #ff0000; height: 500px;">
    <div style="width: 10%; border: 2px dotted #ffd800; height: 100%; float: left;">Left Column</div>
    <div style="width: 79%; border: 2px dotted #b6ff00; height: 100%; float: left;">Center column</div>
    <div style="width: 10%; border: 2px dotted #ffd800; height: 100%; float: left;">Right Column</div>
  </div>
  <div style="bottom: 0px; width: 100%; height: 75px; border: 2px dashed #f117d2; z-index: 0; text-align: center;">
    <p>Visited <%=Application["mone"] %> people.</p>
    <p>Copyrights reserved.</p>
  </div>
</body>

看起来边框迫使您的第三列超过可用的 space 数量，并且影响您的列被迫从布局换行并进入下面的行。

更新我有一种偷偷摸摸的感觉，你的内容页面的内容迫使中央栏的宽度变宽了！

您可以通过暂时将样式属性修改为中心栏样式来确认这一点。

<div style="width: 79%; border: 2px dotted #b6ff00; height: 100%; float: left; overflow: hidden;">Center column</div>

Answer 2

边框应用在 DIV 周围，因此如果您有一个宽度为 100 像素的 DIV 并且应用了 1 像素的边框，您最终会得到 DIV 总宽度为 102 像素。

当您想要 "see" 页面区域时，我宁愿将颜色应用于 DIV 的背景，因为背景颜色不会改变预期的大小HTML 个元素。

这是包含建议修改的页面（为了便于阅读，我删除了 ASP.NET 代码）：

<!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="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
            table 
            {
               -moz-border-radius:10px;
               -webkit-border-radius:10px;
                border-radius:10px;
            }
        </style>
    </head>
    <body style="margin-top:25px">
        <div style="width:100%; height:80px; border:2px solid #000000; z-index:4; text-align:center;">
            <div>
                <h1>Title</h1>
            </div>
        </div>
        <div style="width:100%; border:2px double #ff0000; height:500px;">
            <div style="width:10%;background-color:#f88;height:100%;float:left"></div>
            <div style="width:80%;background-color:#8f8;height:100%;float:left">
                CONTENT_PLACEHOLDER
            </div>
            <div style="width:10%;background-color:#88f; height:100%;float:left"></div>
        </div>
        <div style="bottom:0px; width:100%; height:75px; border:2px dashed #f117d2; z-index:0; text-align:center;">
            <div>
                <p>Visited # people.</p>
                <p>Copyrights reserved.</p>
            </div>
        </div>
    </body>
</html>

希望对您有所帮助:)

<div> 中的 3 列

3 columns in <div>

html

css

asp.net

master-pages