个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
我在绝对定位的 div(标题)下方设置了一个左浮动的 div(导航)。除了左侧 float 的 div，我还有另一个 div(文章)，其边距比 float div 的宽度稍大(通常用于两列布局)。导航和文章都有 4em 的上边距(标题的高度为 3em)导航 div 的位置有 4em 的额外边距。我可以解决这个问题，但我的问题是:为什么要额外 margin 。如果我省略标题的绝对定位，它看起来像我期望的:标题 - 边距 - 导航和文章在一行。代码:
* {
box-sizing: border-box;
}
body { /*schalte voreinstellung Browser aus */
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 1px;
left: 0px;
height: 3em;
width: 100%;
padding: 10px;
border: 1px solid blue;
border-radius: 0.5em;
background-color: silver;
}
nav {
float: left;
width: 17em; /*breite relativ zum Buchstaben "m" in der aktuellen Schriftgroesse */
border: 1px dashed red; /*Rand und padding jedoch in pixel */
margin-top: 4em;
padding: 5px;
}
article {
margin: 4em 1em 0em 18em; /* top right bottom left */
padding: 0px 10px;
border: 1px dashed red;
min-width: 15em;
}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Layout</title>
</head>
<body>
<header>
headline - position fixed würde sie fest halten
</header>
<nav>
<h2> Navigation </h2>
<ul>
<li> hier die links </li>
</ul>
</nav>
<article>
<h1>CSS-basierte Layouts</h1>
<h2>2 Spalten</h2>
die ziemlich leer sind
</article>
</body>
</html>最佳答案
当您绝对定位标题时，布局的其余部分就好像标题从未存在过一样。
因此，在不考虑标题的情况下，我们正在研究三个主要布局元素:正文、导航和文章。
发生的事情是，因为标题现在与布局的其余部分无关，文章成为主体的第一个流入子项，结果它的顶部边距与主体的顶部边距一起折叠(参见 Why does this CSS margin-top style not work? ) .这导致body被压低，文章的border边缘与body齐平，看起来文章根本没有调整过。
另一方面，导航是 float 的，因此不在流中。 float 元素的边距不会与其祖先一起折叠，因为 float 元素不在流中。因此它的边距边缘与正文齐平，而不是文章中的边框边缘。
当您停止定位页眉时，它仍然是正文的第一个流入子元素。文章的上边距现在与标题的下边距折叠，而不是正文的上边距。由于标题实际上没有任何边距，而且导航和文章的顶部边距相等，这导致后两者相互对齐。
关于html - float div 和绝对定位 div 下方的 div 会导致额外的边距 - 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40405403/
24
4
0
我正在尝试使用 Spark 从 Cassandra 读取数据。 DataFrame rdf = sqlContext.read().option("keyspace", "readypulse
这是代码: void i_log_ (int error, const char * file, int line, const char * fmt, ...) { /* Get erro
我必须调试一个严重依赖 Gtk 的程序。问题是由于某些原因，在使用 GtkWindow 对象时开始出现许多运行时警告。问题是，即使 Gtk 提示严重错误，它也不会因这些错误而中止。我没有代码库的更改历
我正在尝试从已有效编译和链接的程序中检索二进制文件。我已经通过 GL_PROGRAM_BINARY_LENGTH 收到了它的长度。该文档说有两个实例可能会发生 GL_INVALID_OPERATION
我有一个托管在 Azure 环境中的服务。我正在使用控制台应用程序使用该服务。这样做时，我得到了异常: "The requested service, 'http://xxxx-d.yyyy.be/S
我有以下代码，它被 SEGV 信号杀死。使用调试器表明它被 main() 中的第一个 sem_init() 杀死。如果我注释掉第一个 sem_init() ，第二个会导致同样的问题。我试图弄清楚是什么
目前我正在编写一个应用程序(目标 iOS 6，启用 ARC)，它使用 JSON 进行数据传输，使用核心数据进行持久存储。 JSON 数据由 PHP 脚本通过 json_encode 从 MySQL 数
我对 Xamarin.Forms 还是很陌生。我在出现的主页上有一个非常简单的功能 async public Task BaseAppearing() { if (UserID
这是我的代码的简化版本。 public class MainActivity extends ActionBarActivity { private ArrayList entry = new Arr
我想弄明白为什么我的两个 Java 库很难很好地协同工作。这是场景: 库 1 有一个类 A，其构造函数如下: public A(Object obj) { /* boilerplate */ } 在以
如果网站不需要身份验证，我的代码可以正常工作，如果需要，则在打印“已创建凭据”后会立即出现 EXC_BAD_ACCESS 错误。我不会发布任何内容，并且此代码是直接从文档中复制的 - 知道出了什么问题
我在使用 NSArray 填充 UITableView 时遇到问题。我确信我正在做一些愚蠢的事情，但我无法弄清楚。当我尝试进行简单的计数时，我得到了 EXC_BAD_ACCESS，我知道这是因为我试图
我在 UITableViewCell 上有一个 UITextField，在另一个单元格上有一个按钮。 我单击 UITextField(出现键盘)。 UITextField 调用了以下方法: - (BO
我有一个应用程序出现间歇性崩溃。崩溃日志显示了一个堆栈跟踪，这对我来说很难破译，因此希望其他人看到了这一点并能为我指出正确的方向。 基本上，应用程序在启动时执行反向地理编码请求，以在标签中显示用户的位
我开发了一个 CGImage，当程序使用以下命令将其显示在屏幕上时它工作正常: [output_view.layer performSelectorOnMainThread:@selector(set
我正在使用新的 EncryptedSharedPreferences以谷歌推荐的方式上课: private fun securePrefs(context: Context): SharedPrefe
我有一个中继器，里面有一些控件，其中一个是文本框。我正在尝试使用 jquery 获取文本框，我的代码如下所示: $("#").click(function (event) {}); 但我总是得到 nu
在以下场景中观察到 TTS 初始化错误，太随机了。 已安装 TTS 引擎，存在语音集，并且可以从辅助功能选项中播放示例 tts。 TTS 初始化在之前初始化和播放的同一设备上随机失败。 在不同的设备(
maven pom.xml org.openjdk.jol jol-core 0.10 Java 类: public class MyObjectData { pr
在不担心冲突的情况下，可以使用 MD5 作为哈希值，字符串长度最多为多少？ 这可能是通过为特定字符集中的每个可能的字符串生成 MD5 哈希来计算的，长度不断增加，直到哈希第二次出现(冲突)。没有冲突的
我是一名优秀的程序员,十分优秀！