Question

很长一段时间我一直在使用一个非常好的列跨越方法我偶然发现，其中我可以使用类.boxcontainer和子.box元素的div，并使用{ :after上的{1}}伪元素，我的.boxcontainer列在页面上对齐得很好。以下是最重要的定义：

.box

我之前的大多数项目都是 XHTML1 Transitional （我后来学到的与其他DTD相比使用了有限的怪癖模式），并且在XHTML1中使用此方法的父.boxcontainer { text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; background-color: orange; } .boxcontainer:after { content: ''; display: inline-block; width: 100%; height: 0px; font-size: 0px; line-height: 0px; }总是围绕孩子.boxcontainer元素完全包裹。

但是，在HTML5中处理一个新项目时，我发现在对齐的.box元素下面似乎添加了一个额外的行。您可以在此处看到一个示例：http://jsfiddle.net/RZQTM/1/ - 点击小提琴选项并将DTD更改为其他任何内容，您将看到我的意思 - 橙色“乐队”出现在合理的蓝盒子。

我认为这归结为.box伪元素被渲染的内容几乎就像是另外一行内容，但我不知道如何修复它。任何有关如何消除箱子下方额外空间的提示都会非常感激。

Answer 1

我用来使这个额外的行消失的技巧是在父母身上应用line-height:0;，并将line-height重置为1.2em或您设置的任何行高。 vertical-align：top; / *或bottom * / on：在元素结束后吞下任何垂直间隙。

一个例子：http://codepen.io/gcyrillus/pen/dlvCp

Answer 2

使用额外标记并使用CSS表格单元

我有时会使用以下内容。在HTML中，我添加了一个额外的元素div.spacer：

<div class="boxcontainer">
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
    <div class="spacer"></div>
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
    <div class="spacer"></div>
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
    <div class="spacer"></div>
    <div class="box two">
         <h3>This is the title</h3>
            Lorem ipsum dolor amit ...</div>
</div>

对于CSS，我在父容器上使用display: table，然后在display: table-cell子元素上使用.box：

.boxcontainer {
    background-color: orange;
    display: table;
    width: 100%;
}
.box {
    vertical-align: top;
    display: table-cell;
    background-color: blue;
    color: white;
    font-family: Trebuchet MS;    
}

演示小提琴是：http://jsfiddle.net/audetwebdesign/xWfk2/

在内部，CSS将.spacer重新作为兄弟表格单元格，默认间距往往是均匀的，因为.box元素具有固定的宽度。

如果.spacer元素用于有用的目的（具有真实内容），并且如果您有其他理由使用表格单元格，比如垂直定位控制等，这种方法是理想的。

额外的行添加：使用HTML5 DTD后的伪元素（与XHTML1相比）

2 个答案: