-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 回答
0

我现在实现了我想要的：https ://jsfiddle.net/mozf1uLk/

我不明白为什么在第一个示例中，即使使用边框框，第一行中的组也会改变其高度。

这是工作的版本：

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

            <div class="grid-column-group">
                <div class="grid-row" style="width: 100%; height: calc(1.5em * 4)">
                    <div class="grid-column" style="width: 100%; height: calc(1.5em * 4)">
                        2
                    </div>
                </div>
                <div class="grid-row" style="width: 100%">
                    <div class="grid-column" style="width: 50%; height: calc(1.5em * 4)">
                        3
                    </div>
                    <div class="grid-column" style="width: 50%; height: calc(1.5em * 4)">
                        4
                    </div>
                </div>
            </div>
            <div style="float: none; clear: both"></div>
        </div>
    </div>
</div>

div.table
{
    width: 100%;
}

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

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

div.table > div.header .grid-row/*:not(:last-child)*/
{
    border-bottom: solid red 5px;
}

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

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

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

div.table > div.header .grid-column
{
    background-color: lightgreen;
}

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

.prensaGrid > div.header > div.grid-row > div.grid-column-group:nth-child(n+2)
{
    width: calc(100% / 3 * 2);
}
于 2016-12-15T22:28:13.300 回答