css - 通过 CSS 将边框与嵌套的 div 对齐

Question

我的布局在 https://jsfiddle.net/Ld07e4s7/4/ 中但我无法使第一个蓝色边框达到与其他蓝色边框相同的程度。

div.table
{
	width: 100%;
}

div.table > div.header .grid-column
{
	float: left;
}

div.table > div.header > div
{
	height: calc(1.5em);
	/*display: flex;
	align-items: center;*/
	justify-content: center;
	text-align: center;
}

div.table > div.header div
{
	box-sizing: border-box;
}

div.table > div.header .grid-row > .grid-column
{
	border-top: solid red 5px;
}

div.table > div.header > .grid-row > .grid-column
{
	border-left: solid blue 5px;
}

div.table > div.header > .grid-row > .grid-column .grid-column:nth-child(n+2)
{
	border-left: solid yellow 5px;
}

div.table > div.header .grid-column
{
	background-color: lightgreen;
	/*border: solid red 5px;*/
	/*box-sizing: border-box;*/
}

div.table > div.header .grid-row
{
	box-sizing: border-box;
}

.prensaGrid > div.header > div.grid-column
{
	height: calc(1.5em * 6);
}

.prensaGrid > div.header > div.grid-row > div.grid-column:nth-child(1)
{
	width: calc(100% / 17);
}

.prensaGrid > div.header > div.grid-row > div.grid-column:nth-child(n+2)
{
	width: calc(100% / 17 * 2);
}

<div class="table prensaGrid">
	<div class="header">
		<div class="grid-row">
			<div class="grid-column" style="height: calc(1.5em * 6)">Amostras</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Diâmetro Externo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Profundidade Rebaixo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Profundidade Rebaixo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Profundidade Rebaixo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Profundidade Rebaixo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Profundidade Rebaixo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Profundidade Rebaixo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div class="grid-column">
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					Profundidade Rebaixo<br />(mm)
				</div>
				<div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Mín.
					</div>
					<div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
						Máx.
					</div>
				</div>
			</div>

			<div style="float: none; clear: both"></div>
		</div>

		<div style="float: none; clear: both"></div>
	</div>
	<div style="float: none; clear: both"></div>
</div>

<div style="float: none; clear: both"></div>

也许我不太了解盒子大小。但如果没有它，它会损坏得更多:

div.table > div.header div
{
    box-sizing: border-box;
}

此外，这种布局在 Edge 中也出现了问题。我该如何解决？

Answer 1

因为你使用了box-sizing: border-box，你需要添加边框尺寸:

height: calc(1.5em * 6 + 5px);

你可以使用 box-sizing: content-box 但是你会遇到横向问题。