html - 如何仅使用浮动将 H2 移动到 H1 下方
问题描述
H2 不会低于 H1。
我正在为客户建立一个网站,并希望导航栏具有以下对齐方式:左侧的图标,图标右侧的 H1,H1 下方的 H2。我已经完成了前两个部分,但我的 H2 不会移动到 H1 下方。谁能帮我解决这个问题?
#header-nav {
width: 100%;
background-color: #3985BA;
border-radius: 0;
border: 0;
}
#logo {
background: url('../images/piano.png') no-repeat;
width: 200px;
height: 200px;
}
.navbar-brand {
padding-top: 25px;
text-align: center;
}
.navbar-brand h1 {
text-transform: uppercase;
font-family: bebas-neue, sans-serif;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand span {
text-transform: uppercase;
color: #A7D8DC;
margin-top: 15px;
font-weight: 600;
}
.navbar-brand a:hover,.navbar-brand a:focus {
color: #04292C;
text-decoration: none;
}
#header1 {
color: #04292C;
}
<header>
<nav id='header-nav' class='navbar navbar-default'>
<div class='container'>
<div class='navbar-header'>
<a href="index.html" class='float-left'>
<div class='d-none d-sm-none d-md-none d-lg-block d-xl-block' id='logo' alt='piano logo'></div>
</a>
<div class='navbar-brand'>
<a href='index.html' class='float-left' id='header1'><h1>Sandra's Studio</h1></a>
<p>
<span id='header2'>Cumming, GA</span>
</p>
</div>
</div>
</div>
</nav>
</header>
解决方案
这是你想要的吗?
我用 包装了a
标签h1
,然后添加了clearfix
类以清除浮动。
<h1 class="clearfix">
<a href='index.html' class='float-left' id='header1'>
Sandra's Studio </a>
</h1>
#header-nav {
width: 100%;
background-color: #3985BA;
border-radius: 0;
border: 0;
}
#logo {
background: url('../images/piano.png') no-repeat;
width: 200px;
height: 200px;
}
.navbar-brand {
padding-top: 25px;
text-align: center;
}
.navbar-brand h1 {
text-transform: uppercase;
font-family: bebas-neue, sans-serif;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand span {
text-transform: uppercase;
color: #A7D8DC;
margin-top: 15px;
font-weight: 600;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
color: #04292C;
text-decoration: none;
}
#header1 {
color: #04292C;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
<nav id='header-nav' class='navbar navbar-default'>
<div class='container'>
<div class='navbar-header'>
<a href="index.html" class='float-left'>
<div class='d-none d-sm-none d-md-none d-lg-block d-xl-block' id='logo' alt='piano logo'></div>
</a>
<div class='navbar-brand '>
<h1 class="clearfix"><a href='index.html' class='float-left' id='header1'> Sandra's Studio </a></h1>
<p class="text-left">
<span id='header2'>Cumming, GA</span>
</p>
</div>
</div>
</div>
</nav>
</header>
推荐阅读
- java - 重新解释底层位模式并将其写入数组或字段的最有效方法是什么?
- docker - 使用数据库重置 docker 映像
- node.js - Dialogflow - 关于未使用 NodeJS 显示的实现意图的一个非常基本的问题
- python - 我有每月数据,每年按所有月份划分,如何重建数据集以恢复正常的每月数据?
- xor - 围棋中 Matasano 挑战 6 的不一致结果
- algorithm - 插入排序下限以及为什么它与 `1/(2^n)` 相比?
- c++ - Swift 构建错误“在范围内找不到‘C++ 字节数组’”
- operating-system - 如何索引大小大于虚拟内存的程序的任何位置?
- mysql - MySQL 优化器 - 成本规划器不知道 DuplicateWeedout 策略何时创建磁盘表
- azure - 使用 Get-AzLocation 选择特定的 Azure 位置