gpt4 book ai didi

css - 960.gs 布局问题

转载 作者:太空宇宙 更新时间:2023-11-03 19:17:49 29 4
gpt4 key购买 nike

我正在尝试学习 960 网格系统。我的左侧正文显示在右侧,反之亦然。我的意图是将这两个框放在同一条线上。左侧正文在页面上的显示位置也高于右侧正文。

有什么想法吗?使困惑!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Site name</title>
<link rel="stylesheet" type="text/css" href="./960.css" />
<link rel="stylesheet" type="text/css" href="./styles/main.css" />
</head>

<body>
<div id="skip">
<a href="#content">Skip navigation</a>
</div>

<div id="header" class="container_12">
<div id="mainLogo" class="grid_4">
<h1>Page name</h1>
</div>

<div id="testContainer" class="grid_8">
<div id="mainNavigation">
<ul>
<li><a href="#">nav1</a></li>

<li><a href="#">nav2</a></li>
</ul>
</div>
</div>
</div>

<div id="content" class="container_12">
<div id="contentleft" class="grid_8">
<p>Left body text</p>
</div>

<div id="contentright" class="grid_4">
<p>Right body text</p>
</div>
</div>

<div id="footer" class="container_12">
</div>
</body>
</html>

最佳答案

对我来说(在 Chrome 8 中),问题是由 H1 上的边距引起的。具体来说,Chrome 的用户代理样式表正在插入:

h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0px;
}

此 h1 的额外高度导致 contentleft div 直接在 testContainer div 下方开始。

将边距设置为 0 可以解决我在 Chrome 8 中遇到的问题。

注意 instructions for setting up 960.gs提及 reset.css 样式表的使用:

<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>

这也应该可以解决这个问题。无论如何,包含一个重置样式表通常是一个好习惯,所以如果您正在学习 960 网格系统,您应该包含这个样式表。

关于css - 960.gs 布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5669771/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com