-1

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 で壊れます。どうすれば修正できますか？

4

2 に答える 2

1

を使用box-sizing: border-boxしているため、境界線のサイズを追加する必要があります。

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

使用できますbox-sizing: content-boxが、水平方向の問題が発生します。

于 2016-12-15T18:37:54.213 に答える