HTML/CSS新手求助：如何将指定元素移至透明容器底部

核心问题分析 #

你的main-span是flex容器，但默认采用横向排列（flex-direction: row），这导致margin-top: auto无法让left-div-inside-span垂直推到底部；同时.text元素的固定高度和容器内边距也造成了多余的底部空间。

调整步骤及代码修改 #

以下是针对性的CSS调整：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  border: 10px groove darkblue;
  background: powderblue;
  color: #9932CC;
  font-family: 'Trebuchet MS', sans-serif;
  overflow: auto;
}

body {
  height: 100%;
  border: 5px double darkgreen;
  background: #3a768520;
  overflow: inherit;
}

div.header {
  background: #112244;
  position: relative;
  top: 2px;
  border-top: 10px double crimson;
  border-bottom: 10px double crimson;
  margin-right: 5px;
  width: 100%;
  border-radius: 2%;
}

h1 {
  height: 50px;
  line-height: 50px;
  font-size: 1rem;
  position: relative;
  border-left: 4px outset #fffbf9;
  display: flex;
}

h1::before {
  content: '\004f';
  color: #eee;
  background: dodgerblue;
  display: inline-block;
  width: 30px;
  text-align: center;
  font-size: 2rem;
  margin-right: 5px;
  text-decoration: underline #E9967A 2px;
  text-underline-offset: 0.4rem;
}

span.main-span {
  display: flex;
  flex-direction: column; /* 修改为垂直排列 */
  position: relative;
  top: 30px;
  height: 65vh;
  background: #11464175;
  margin-left: 5px;
  margin-right: 5px;
  border-right: 10px double #f02a6cfd;
  overflow: auto;
  color: lightblue;
  padding: 10px; /* 合并内边距，避免上下左右不一致 */
  font-family: cursive;
  letter-spacing: 1px;
  word-spacing: 2px;
}

span.text em {
  color: coral;
  font-size: 1.2rem;
}

div.main-flex {
  background: olive;
  width: 25%;
  height: 60%; /* 调整高度，避免占满容器 */
  border: 4px double #80000080;
  align-self: flex-end; /* 让它靠右对齐，保持原有布局 */
  display: flex;
  margin-top: 10px; /* 增加和上方元素的间距 */
}

div.main-flex>div {
  width: 30%;
  height: 100%;
}

div.main-flex>div:nth-of-type(1) {
  background: olive;
}

div.main-flex>div:nth-of-type(2) {
  background: powderblue;
}

div.main-flex>div:nth-of-type(3) {
  background: coral;
}

div.main-flex>div:nth-of-type(4) {
  background: darkblue;
}

div.main-flex>div:nth-of-type(5) {
  background: darkred;
}

div.main-flex>div:nth-of-type(6) {
  background: darkorange;
}

span>div.left-div-inside-span {
  width: 200px;
  height: 100px;
  background: cyan;
  margin-top: auto; /* 在垂直flex容器中，自动顶开上方元素，贴到底部 */
  border: 4px double blueviolet;
  margin-right: auto; /* 保持靠左对齐 */
  /* 移除position: relative和bottom，避免冲突 */
}

span.main-span>span.text {
  background: rgb(58, 55, 21);
  display: flex;
  height: 100px;
  width: 400px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px; /* 可选：增加和下方元素的间距，避免紧贴 */
}

关键改动说明 #

• 将span.main-span的flex-direction设为column，让子元素垂直排列，此时margin-top: auto才能生效，将left-div-inside-span推到容器底部。
• 移除left-div-inside-span的position: relative和bottom属性，避免和flex布局冲突。
• 调整main-flex的align-self: flex-end保持其靠右的原有布局，同时设置合适的高度和间距。
• 合并main-span的内边距为padding:10px，统一上下左右的间距，避免多余空间。

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