html - HTML - div 中的第一个文本不会被下推
问题描述
我在 div 中有一个 h1 标签,我希望它从右向上推到 div 的顶部。我尝试在 h1 上添加上边距,但这无济于事。当我在 div '#contact' 中放置一些文本时,突然 h1 向下移动。有没有办法在“#contact”中不带文字的情况下将 h1 向下移动?先感谢您。
片段:
<div style="float:left; margin: 0; width: 100%;background-color:#eeeeee;font-size: 20px;color: #252a30;text-align: center;">
<style>
.half {
width: 40%;
margin: 3%;
font-size: 0.7em;
display: block;
}
.hl {
text-align: left;
float: left;
}
.hr {
text-align: right;
float: right;
}
.project-tags {
color: #b2c6cd;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
opacity: 1;
text-transform: uppercase;
}
.half ul, .half h1 {
margin-bottom: 0px;
margin-top: 0px;
}
.half h1 {
margin-bottom: 5px;
}
.project-tags li {
color: #fed766;
}
.project-tags span {
color: #b2c6cd;
}
.half p {
font-weight: 300;
font-size: 20px;
}
.button-primary {
margin: 10px 0 60px;
color: #252a30;
background-color: rgba(0, 0, 0, 0);
border: 2px solid #FED766;
height: auto;
font-size: 1rem;
line-height: normal;
text-transform: uppercase;
font-weight: 700;
transition: all .3s ease-in-out;
letter-spacing: 0;
border-radius: 50px;
display: inline-block;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
outline: 0;
padding: 1.0rem 3.0rem;
}
.button-primary:hover {
color: #FED766;
background-color: #252a30;
border: 2px solid #252a30;
padding: 1.0rem 3.5rem;
}
.on-ylw {
border: 2px solid #252a30;
}
</style>
<p id="projects"></p>
<h1>My Projects</h1>
<p style="font-weight: 300;">Examples of my work</p>
<div class="projects" style="margin: 0 15%;">
<div class="half hl">
<h1>Text</h1>
<ul class="project-tags">
<li><span>Python</span></li>
</ul>
<p>Text</p>
<a href="link" class="button-primary">Visit Website</a>
</div>
<div class="half hr">
<img src="image" alt="link" style="border-radius: 10px;position: relative: width: 100%; border-style: none;">
</div>
</div>
</div>
<div style="margin: 0; width: 100%; background-color: #FED766;position: static;">
<div id="contact"></div>
<br>
<br>
<h1 style="text-align: center; font-weight: bold; color: #000000; font-size: 40px;">Want To Contact Me</h1>
<p style="text-align: center; font-weight: 300; font-size: 25px; color: #000000;">I'm currently accepting new projects and would love to hear about yours.</p>
<br>
<button class="button-primary on-ylw" style="display: table; margin: 0 auto;">Contact Me</button>
<br>
<br>
</div>
解决方案
添加:
clear: both;
h1 所在的属性<div>
。您拥有的 DOM 的 div 向上浮动:左;因此,它实际上并不在您期望的 dom 中。
然后您应该能够按预期将 marign-top 添加到 H1 中。
推荐阅读
- postgresql - 创建扩展 postgis 给出错误:无法打开扩展控制文件“/opt/pgpro/std-11/share/extension/postgis.control”
- android - 无法在android studio中打开运行窗口
- salesforce - CPQ报价线显示多次
- inkcanvas - 手写功能就像 fiinote 手写一样
- android - 在本机反应中发布后崩溃的应用程序?
- flutter - 如何限制 TextSpan 小部件的文本长度
- javascript - 单击“Enter”按钮时提交表单,并进行验证
- flutter - 如何在不改变屏幕/页面的情况下传递数据?
- kubernetes - 是否可以在容器内的 env 中将 application.properties 的内容作为键/值对公开?
- javascript - 使用 node.js 处理来自 aws s3 getobject 的数百万条记录并通过分页将记录返回到前端的最佳方法