- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有三个 div 标签,我想在 div 标签之间垂直留出空间,并且还希望我的第一个 div 标签是固定的。
当我将我的第一个 div 位置设置为不是固定的时,我可以能够制作垂直空间。
<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>
</div>
</body>
</html>
当我将“div a”位置更改为固定时,“div a”和“div b”都从边距顶部:2em。
<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>
</div>
</body>
</html>
请帮我把我的“div a”设为固定并在“div a和b”之间留出空格 .
最佳答案
为了让div.a
(固定的那个)保持在页面的顶部,添加top: 0;
如果你想让它保持在顶部其余内容,包括z-index: 2;
。
为了在 div.a
和 div.b
之间添加间距,您必须在 周围放置一个容器
并对其进行适当的填充。如果您只是将填充放在主容器 div 上,它将偏移 div
>div.bdiv.a
。
如果可能,将确定的高度设置为 div.a
,而不是百分比,因为这将使 div.b
的垂直对齐及其容器更容易.这样您就可以将 div.b
的 margin-top
设置为 div.a
的 height
。
下面是为了更好的可读性而重构的 CSS 和 HTML:
/* CSS */
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
}
div.container {
height: 100%;
}
div.container,
div.b-container {
background-color: lime;
}
div.a {
height: 70px;
background-color: blue;
position: fixed;
top: 0;
z-index: 2;
}
div.b-container {
position: relative;
padding-top: 2em;
margin-top: 70px;
}
div.b-container div.b {
width: 70%;
height: 100%;
background-color: gray;
margin: auto;
margin-bottom: 2em;
}
div.c {
height: 5%;
background-color: aqua;
}
<!-- HTML -->
<div class="container">
<div class="a">
a
</div>
<div class="b-container">
<div class="b">b
</div>
</div>
<div class="c">
c
</div>
</div>
关于html - 如何在 div 标签之间留出垂直空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26240714/
我在使用带有 vector STL 的迭代器时遇到了这个错误。 代码:- #include #include void print_vec(std::vector vec) { auto
JAVA:两个引用“p”&&“pp”之间有区别吗? PrintStream p = new PrintStream(System.out); p.println("lol");
我尝试从主分支中拉出,但收到错误消息: $ git --no-optional-locks -c color.branch=false -c color.diff=false -c color.sta
我面临着一个让我抓狂的问题! 我有一个函数,这个: void load_weapons3(t_env *e, char *name, int x, t_weapon *w) { char
我正在尝试使用 CUDA 中的最小值、最大值、总和和平均值实现并行归约。 这是我目前的主要代码片段。 int main() { const auto count = 8; const
我知道 double free 或 corruption 错误通常是对 big 3 的违规,但在这种情况下,我找不到违规发生的地方。我有一个复制构造函数、析构函数和赋值运算符,适用于任何处理指针的东西
GTK+ 中的“focus”和“focus-in(out)-event”信号有什么区别?哪个先发射?它们与键盘(TAB)和鼠标点击有什么关系。他们互相依赖吗? 我问这个是因为我想在顶层窗口中跟踪当前聚
*** glibc detected *** /home/ghoshs/workspace/Simulator/Debug/Simulator: double free or corruption (
#include #include #include #include using namespace std; #define MAX_WEIGHT 1000000 class Set {
我在服务器上有两个分支一个叫 R2 的分支和一个叫 DEV 的分支我无意中登录了错误的服务器,进入了存储库并执行了GIT pull 源开发但是存储库在 R2 上。所以我意识到我的错误然后尝试通过做一个
我有一个包含循环的大约 1000 个顶点和 3000 个边的有向图。 我试图从给定的顶点找到所有下游(出)路径。 使用以下 Gremlin 查询时 g.V(45712).repeat(out().si
使用 Delphi XE 2 我试图确定缩放方向以将缩放效果应用于图像(TImage),但没有找到执行此操作的函数,并且图像的 OnGesture 事件中的 EventInfo 属性没有此信息. 我见
我正在尝试创建一个 Zoom_image 函数,它使用离散傅里叶变换来缩放灰度图像。如果图像大小小于或等于 4*4 但大小增加,我包含的代码可以工作。它给出“双重释放或损坏(出)中止(核心转储)”错误
当我执行 popAll 函数时,出现以下错误: 双重释放或腐败(出)中止(核心转储) 我想我已经将错误来源缩小到了这个函数。 IntegerStack 是我制作的一个简单的 ADT,其中包含一个名为
我有网络开发背景,我正在尝试创建类似于 this technique 的东西适用于 iOS(使用 Cocoa/Obj C)。我在谷歌搜索资源时遇到了很多困难,因为 iOS 中的“视差”往往指的是 iO
我想实现一个 faceted search对于我的一个项目。我正在使用 PHP5、Mysql 和 Symfony 1.4。显然社区指向Apache Solr这似乎正是我想要完成的。 问题是该网站将在不
我知道有 questions floating around当您没有提供明确的分支名称时,关于来自特定分支的 git pull,但是我想知道即使用户确实指定了不同的分支,是否也可以强制 pull 分支
我正在尝试将我的更改推送到 NAS 上的存储库。它以我无法理解的方式失败。 documentation声明默认情况下 push 仅适用于快进更新。很公平。所以我做了一个 git pull(我的 Rem
我刚开始使用 Oracle 的 Coherence 缓存,我注意到这一点:如果我在缓存中放入一个 ConcurrentHashMap 对象,当我检索它时,我可以看到它被转换为一个普通的 HashMap
我尝试创建一个连接到数据库的线程,从那里获取一些数据并打印到控制台。问题是当该线程完成时抛出异常: 双重免费或腐败(出局)中止(核心转储) 我尝试使用 sqlite3 和 pthread,但这两个并不
我是一名优秀的程序员,十分优秀!