Question

我正在尝试创建一个包含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的顶部不对齐。我该如何解决这个问题？

另外，我创建这种风格的网页的方法是否正确？

Answer 1

请尝试使用此代码：

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中使用classes / 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

希望它有所帮助！

如何正确对齐这些div的顶部？

1 个答案: