我对 HTML/CSS 是一个相当大的菜鸟，我正在通过制作简历来构建我的第一个元素。我在 HTML 中拥有我需要的所有东西，现在我正在用 CSS 组织和移动东西。为了将东西移动到正确的位置，我几乎是通过使用顶部/底部/左/右并从相对位置调整像素来猜测和检查。有没有比这更有效的方式在页面上移动内容？
h1 {
text-align: center;
}
.SEE {
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 5px;
padding-top: 0px;
}
.skills {
position: relative;
top: 51px;
left: 34px;
}
.experience {
position: relative;
text-align: center;
}
.education {
position: relative;
left: 1150px;
bottom:51px;
}
img {
height:200px;
width:200px;
position: relative;
bottom:450px;
left:250px;
}
编辑:这是它链接到的 HTML。
<body>
<h1>My Name</h1>
<div class='SEE'>
<h2 class='skills'>Skills</h2>
<h2 class='experience'>Experience</h2>
<h2 class='education'>Education</h2>
</div>
<div class='context'>
<p class='Ski'>Skills Stuff</p>
<p class='Exp'>Experience Stuff</p>
<p class='Edu'>Education Stuff</p>
</div>
<div>
<h3>Contact Info</h3>
<p>Email: blank <br>
Facebook: blank <br>
Mobile Phone: blank
</p>
</div>
<img src="blank">
</body>
最佳答案
使用“position: relative”和top/left/right/bottom 来构建布局并不是一个好习惯。我认为只有在少数情况下以及对位置进行细微调整时才合理。
将无法适配不同的屏幕尺寸，以后要修改那个页面时会很难维护。
在您的情况下，我认为您正在尝试通过使用相对定位将所有三个 H2 标题定位在一条水平线上，否则它们将位于一条垂直线上。这是因为 h1/h2/h3... 默认具有“display:block”样式，这意味着该元素之后的内容将移动到其下方。
如果您希望它们全部在一行中，您可以将 h2 标签设置为使用“display: inline-block”，这样不会将下一个标题移到下一行，并允许您为每个标题设置宽度.这样您就可以在一行中获取它们。
此外，当将样式应用于容器内的多个元素时，您可以为容器使用一个选择器，然后为要影响的标签或类使用另一个选择器:
.SEE h2 { display:inline-block; }
这样可以节省时间并避免重复样式
关于html - 有没有更有效的方法来移动 CSS 中的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43509254/