技术求助：如何让div内列表置于标题下方顶部？当前元素自动沉底

我来帮你搞定这个布局问题，让列表乖乖待在标题下方的顶部位置，同时保持整体排版整洁。咱们先梳理下当前代码的小问题，再针对性修改：

问题分析 #

当前CSS里的float: left会让列表脱离正常文档流，加上#bloc2的margin-top:50px，导致整体布局错位。咱们通过调整CSS属性来修正：

修改后的CSS代码 #

.main { 
  margin-left: 160px; 
  font-size: 28px; 
  padding: 0px 10px; 
  overflow: scroll; 
}
.main ul{ 
  margin-left: 15px; 
  display: block; 
  /* 去掉float:left，让列表留在正常文档流 */
  margin: 10px 0 0 15px; /* 调整margin，和标题保持合适间距 */
  padding: 0; /* 去掉默认内边距，避免多余缩进 */
}
#bloc1, #bloc2{ 
  display:inline-block; 
  vertical-align: top; /* 让两个区块顶部对齐 */
}
#bloc2 img{ 
  max-width: 700px; 
  margin-top: 10px; /* 调整图片顶部margin，和列表对齐 */
  margin-left: 100px; 
}
.main h1{ 
  color: rgb(95, 95, 95); 
  margin-bottom: 0; /* 减小标题和列表的间距 */
}

完整代码示例 #

<style>
.main { 
  margin-left: 160px; 
  font-size: 28px; 
  padding: 0px 10px; 
  overflow: scroll; 
}
.main ul{ 
  margin-left: 15px; 
  display: block; 
  margin: 10px 0 0 15px; 
  padding: 0; 
}
#bloc1, #bloc2{ 
  display:inline-block; 
  vertical-align: top; 
}
#bloc2 img{ 
  max-width: 700px; 
  margin-top: 10px; 
  margin-left: 100px; 
}
.main h1{ 
  color: rgb(95, 95, 95); 
  margin-bottom: 0; 
}
</style>
<div class="main" id="section1">
<h1>Muhammad Ali</h1>
<div id="bloc1">
<ul>
<li>intro</li>
<li>wat info</li>
<li>contact</li>
</ul>
</div>
<div id="bloc2">
<img src="fotos/muhammad ali.jpg" alt="Muhammad Ali">
</div>
</div>

关键修改点说明 #

• 移除了.main ul的float: left，让列表留在标题下方的正常文档流中
• 添加vertical-align: top到#bloc1和#bloc2，确保两个区块顶部对齐
• 调整标题、列表和图片的margin值，让整体间距更协调
• 去掉列表默认的padding，避免多余缩进

这样调整后，列表就会稳稳地放在标题下方的顶部位置，图片也会和列表保持顶部对齐，整体布局变得整洁有序啦！

内容的提问来源于stack exchange，提问作者Morrismario