我想让我的页眉元素相互堆叠到屏幕的右侧(H1 元素和 H2 元素就在它下面)。我刚刚开始掌握 CSS,所以请多多包涵。尝试在线搜索解决方案,但只能在只有一个元素时找到答案。
无论如何,这就是页面现在在屏幕上的样子:
蓝色的“我们帮助人们和企业”是一个 H1 元素。白色的“实现今天的目标和明天的愿望”是一个 H2 元素。这两个 Header 元素都嵌套在一个 DIV 中
目前 CSS 代码看起来像这样:
.hero01_content-div {
margin-top: 400px;
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
如何让 H2 元素堆叠在 H1 元素的正下方,同时这两个元素都在右侧?我将不胜感激任何帮助。提前谢谢你。
可在此处找到演示上述内容的代码笔:http://codepen.io/anon/pen/qOoVxb
最佳答案
您需要将 float: right
设置为父容器,并从标题元素中移除 float 属性,因为它将脱离正常流。
.hero01_content-div {
margin-top: 400px;
float: right; /* Added */
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
<div class="w-section hero-01">
<div class="hero01_overlay">
<div class="w-container hero01_content">
<div class="w-clearfix hero01_content-div hero01_test" data-ix="scroll-reveal">
<h1 class="hero01_content-head-test-main">We Help People and Businesses</h1>
<h2 class="hero01_content-subhead-test-main">Achieve today's Goals and tomorrow's Aspirations</h2>
</div>
</div>
</div>
</div>
关于css - 如何使用 CSS 将两个或多个元素堆叠到右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33338774/