我正在用 ASP.NET 做一个网站。我正在向您展示 MasterPage，我想要它的地方是 <div style="width:100%; border:2px double #ff0000; height:500px;">在我的 HTML 文件中将包含三列，用于划分我的内容。左边10%，中间80%，右边10%。最后一个(右)是我遇到麻烦的地方。我为每个 div 设置了边框，这样我就可以看到每个 div 的限制以及它们是如何划分的。 第三列不是放在右边，而是向下，在 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>
谢谢!
最佳答案
边框应用在 DIV 周围，因此如果您有一个宽度为 100 像素的 DIV，并且应用了 1 像素的边框，那么您最终会得到一个总宽度为 102 像素的 DIV。
当您想“查看”页面区域时，我宁愿将颜色应用到 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>
我希望这对您有所帮助:)
关于html - <div> 中的 3 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30561017/