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

时间：2016-12-15 18:32:23

标签： css css3 box-sizing

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

也许我对盒子大小不太了解。但如果没有它，它就会变得更加沉重：

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

这种布局也在Edge中有所体现。我该如何解决？

2 个答案:

答案 0 :(得分：1)

由于您使用box-sizing: border-box，因此需要添加边框尺寸：

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

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

答案 1 :(得分：0)

我现在实现了我的目标：https://jsfiddle.net/mozf1uLk/

我不明白为什么在第一个例子中，即使使用border-box，第一行中的组也改变了它的高度。

以下是正在运行的版本：

<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);
}
相关问题
最新问题