将 div 放在第三个 td 下并根据第三个 td 高度更改它的 Y 位置

Question

我正在努力将 div 放在第三个 td 下（屏幕上 7 下 6）。 div(7) 还应根据 td(6) 高度更改其 Y 位置。

1、2、4、5、7 动态改变其内容（它可以包含<sub> 和<sup> 标签）并且文本（6）应该与4 和5 框的顶部对齐。

如果 6 为空，则 7 应位于 4 和 5 框顶部对齐的 6 位。框的宽度和高度应与屏幕上的完全相同（4 - ~width: 200px;, 5 - ~width: 120px;）。

• 我试图将那个 div 放在表格中，但它使盒子变大了。
• 我还尝试在 6 元素的 tr 内制作表格，这也使盒子难看。
• 当你给表格position absolute 时，div 不会改变它的位置。

这是一项复杂的任务，我一周都无法完成。我还尝试制作rowspan 和第三个 tr，将 7 置于 6 之下，但 rowspan 也使框变大（like it shown here）。

允许更改html代码。通过 CSS 制作它很重要，因为它需要打印。当你尝试用 JS 解决它时，最大的问题之一是当你缩小一个窗口时，项目可以改变它的位置。

.detailName {
    margin-top: 10px;
}

.table-sources {
    width: 400px;
    margin-left: 40px;
    margin-top: 3px;
}

.table-wrap:first-child {
    margin-top: -10px;
}

.table-wrap {
    display: flex;
}

.table-vals {
    margin-bottom: 5px;
}

.table-vals th {
    max-width: 200px;
    text-align: left;
    font-size: 13px !important;
    font-weight: normal;
    vertical-align: top;
}

.table-vals .first-th {
    min-width: 200px;
}

.table-vals td {
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
}

.table-vals .second-th {
    float: left;
    position: relative;
    left: 15px;
    width: 98px;
}

.table-vals .first-td {
    border: 2px solid #192E7B;
}

.table-vals .second-td {
    position: relative;
    left: 15px;
    background: wheat;
}

.table-vals .third-th {
    position: relative;
    left: 40px;
}

.table-vals .third-td {
    font-size: 14px;
    font-weight: normal;
    position: relative;
    left: 30px;
    top: -20px;
    text-align: left;
}

.source-link {
    word-break: break-word;
    font-size: 12px;
    color: grey;
    position: absolute;
    width: 400px;
}

.detailName {
    display: block;
}

.detailName {
    font-weight: bold;
}

<div class="tables-wrap">
  <div class="table-wrap">
    <table class="table-vals">
      <tbody>
        <tr class="first-tr">
            <th class="first-th">ipsum dolor</th>
            <th class="second-th">ipsum dolor</th>
            <th class="third-th">ipsum</th>
        </tr>
        <tr class="second-tr">
          <td class="first-td">ipsum dolor</td>
          <td class="second-td" style="background:rgb(123, 161, 196);color:white;">ipsum dolor</td>
          <td class="third-td" style="/* top:-23px; */">Norddeutsches Tiefland</td>
        </tr>
      </tbody>
    </table>
  <div class="table-sources" style="position: relative; left: -120px; top: 31px;">
    <span class="detailName">Ipsum dolor</span><span class="source-link">Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor</span>
    </div>
  </div>
</div>

Answer 1

据我了解，我已尝试满足您的要求，但已移出表格（这些表格主要用于表格数据，而这似乎不是）。

要求：图表中的第 6 项可能存在也可能不存在。在没有第 6 项的情况下，第 7 项应向上移动。第 6 项的顶部（如果没有 6，则为第 7 项的顶部）应与第 4 项和第 5 项的顶部对齐。

这是带有子标题的：

我在浏览器窗口中添加了整体背景颜色以进行对比。

如果删除 .subTitle div，图表中的第 6 项（当前包含“Norddeutsches Tiefland”），您会看到它下方较长的部分（图表中的第 7 项）向上移动到顶部，并且与左侧两个框的顶部（第 4 项和第 5 项）。

这里是 .subTitle 被删除：

		* {
			box-sizing: border-box;
		}

		.table-vals {
			padding: 1rem;
			width: 900px;
			background: #FEE;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 2rem 0 2rem 2rem;
			font-size: 14px;
		}


		.first-row, .second-row {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
			margin-bottom: 0.2rem;
		}

		.second-row {
			height: 200px;
		}

		.table-vals .ath {
			text-align: left;
			font-size: 13px;
			font-weight: normal;
		}

		.first-column {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 200px;
			margin: 0 1rem 0 0;
		}

		.second-column {
			width: 180px;
			/*border: 1px solid black;*/
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin: 0 1rem 0 0;
		}

		.table-vals .atd {
			font-size: 20px;
			font-weight: bold;
			height: 50px;
		}

		.second-row .first-column {
			border: 2px solid #192E7B;
			justify-content: center;
		}

		.second-row .second-column {
			background: rgb(123, 161, 196);
			color: white;
			justify-content: center;
		}

		.third-column {
			width: 400px;
			font-size: 14px;
			font-weight: normal;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
		}

		.source-link {
			word-break: break-word;
			font-size: 10px;
			line-height: 1;
			color: grey;
			position: absolute;
			width: 400px;
		}

		.detailName {
			display: block;
			font-weight: bold;
			line-height: 1;
		}

		.sources {
			width: 400px;
			line-height: 1;
		}

		.second-row .third-column .subTitle {
			font-size: 12px;
			font-weight: normal;
			line-height: 1;
			margin-bottom: 1rem;
		}

<div class="table-vals">
	<div class="first-row">
		<div class="ath first-column">ipsum dolor</div>
		<div class="ath second-column">ipsum dolor</div>
		<div class="ath third-column">ipsum</div>
	</div>
	<div class="second-row">
		<div class="atd first-column">ipsum dolor</div>
		<div class="atd second-column" style="">ipsum dolor</div>
		<div class="atd third-column"><div class="subTitle">Norddeutsches Tiefland</div>
			<div class="sources">
				<div class="detailName">Ipsum dolor</div>
				<div class="source-link">Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor Ipsum dolor</div>
			</div>
		</div>
	</div>
</div>