2

我有一个标题，应该始终显示在页面顶部，距顶部约 20 像素。现在它是用两个 div 定义的，并且按照它应该的方式工作。

http://jsfiddle.net/nBgj4/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    height: 100%;
    margin-left: 20px;
    margin-top:0px;
    margin-bottom: 0px;

}
.subheader-left {
    position: absolute;
    top: 20px;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}
.subheader-right{
position: absolute;
font-family: sans-serif;
font-size: 12px;
top: 20px;
right: 20px;}
</style>

<title>XYZ</title>

</head>
<body>
    <div class="subheader-left">XYZ<br /></div>
    <div class="subheader-right">LOREM</div>
</body>
</html>

一旦我尝试用“标题”DIV 标记封装两个 DIV 标记，并为其分配两个封装的 div 共有的元素（顶部：20px），它就会破坏设计。

我一直认为嵌套的 div 是从它们的父 div 继承的，并且想了解为什么在这种情况下这不起作用。我认为这是因为“位置：绝对”标签，但“位置：相对”破坏了设计。

谢谢

http://jsbin.com/emulel/1/edit

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    height: 100%;
    margin-left: 20px;
    margin-top:0px;
    margin-bottom: 0px;

}
.header {top:20px;}
.subheader-left {
    position: relative;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}
.subheader-right{
position: relative;
font-family: sans-serif;
font-size: 12px;
right: 20px;}
</style>

<title>XYZ</title>

</head>
<body>
<div class="header">
    <div class="subheader-left">XYZ<br /></div>
    <div class="subheader-right">LOREM</div>
</div>
</body>
</html>
4

3 回答 3

2

你混合了一些东西：

header 没有分配位置，所以 top: 20px; 没用。如果您定位元素，absolute 将始终针对相对定位的元素定位。

你应该去浮动：

保持你的 html 原样并添加这个 CSS：

.header {
  overflow: hidden;/* to contain the floated elements */
}
.subheader-left {
  float: left;
}.subheader-right {
  float: left;
}
于 2012-08-13T21:42:54.893 回答
0

这样的事情应该会让你走上正确的道路：

http://fiddle.jshell.net/3gZNM/3/

无需绝对定位。

于 2012-08-13T21:42:49.197 回答
0

你需要

.subheader-left {
float:left;
}
.subheader-right{
float:right;
}

这是因为在第一个示例中，div 有position:absolute，所以它们的宽度是最小的。

但是在第二个他们有position:relative并且它display是block，所以他们扩大并且他们的宽度是最大的。然后第二个 div 转到第二行。

但是如果你添加浮动，它们的宽度将最小并且它们将保持在同一条线上。此外，第二个 div 将向右移动。

但是请记住将标题更改overflow为hidden,auto或scroll, 或添加<div style="clear:both"></div>到标题的末尾。

于 2012-08-13T21:43:16.940 回答