我正在尝试创建一个包含 2 组 div 的网页。第一组 div 应固定在适当位置并与页面左侧对齐。第二组 div 包含网页的主要内容，并且应该是可滚动的。
为此，我创建了以下代码:
<!DOCTYPE html>
<html>
<body style="height: 1500px">
<div style="position: fixed; display: inline;">
<div style="border-style: solid; width: 250px; margin: 15px; padding: 15px;"><h2>Add Media</h2></div>
<div style="border-style: solid; width: 250px; margin: 15px; padding: 15px;"><h2>Add Media</h2></div>
<div style="border-style: solid; width: 250px; margin: 15px; padding: 15px;"><h2>Add Media</h2></div>
</div>
<div style="margin-left: 350px">
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
<div style="border-style: solid; margin: 20px; padding: 20px;">
<h1>POST</h1>
</div>
</div>
</body>
</html>
除了每个部分的第一个 div 的顶部没有对齐外，这段代码的执行正如我所希望的那样。我该如何解决这个问题？
另外，我创建这种风格的网页的方法是否正确？
最佳答案
为你的代码试试这个:
HTML -
<body>
<div class="addMedia">
<div class="addMediaDivs">
<h2>Add Media</h2>
</div>
<div class="addMediaDivs">
<h2>Add Media</h2>
</div>
<div class="addMediaDivs">
<h2>Add Media</h2>
</div>
</div>
<div class="postBlocks">
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
<div class="postDivs">
<h1>POST</h1>
</div>
</div>
</body>
CSS -
body{
height: 1500px;
}
.addMedia{
position: fixed;
display: inline;
vertical-align: top;
}
.addMediaDivs{
border-style: solid;
width: 250px;
margin-bottom: 20px;
padding: 20px;
height: 100px;
}
.postBlocks{
margin-left: 350px;
}
.postDivs{
border-style: solid;
margin-bottom: 20px;
padding: 20px;
vertical-align: top;
height: 100px;
}
从本质上讲，您所做的并不是设计代码样式的最佳行业标准。您可能希望将您的 css 保存在一个单独的 .css 文件中，并且只在您的 html 中使用类/id。您为两个 div 分配了不同的填充/边距。因此，顶部没有对齐。
您可以在此处阅读有关有效 CSS 样式技术的更多信息 - https://css-tricks.com/css-style-guides/ , https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/ , http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/ .
如果您想通过示例了解如何更好地设计样式，请在此处查看我根据您的需要重新格式化的代码 - http://plnkr.co/edit/IGAF8HZAIegJeMU1inzd?p=preview
希望对您有所帮助!
关于html - 如何正确对齐这些 div 的顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37552685/