0

很长一段时间以来，我一直在使用我偶然发现的一种非常好的列跨越方法，其中我可以有一个带有类.boxcontainer和子.box元素的 div，并在 上使用:after伪元素.boxcontainer，我的.box列在页面上很好且均匀. 以下是最重要的定义：

.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;
}

我以前的大部分项目都是XHTML1 过渡（我后来了解到，与其他 DTD 相比，它使用了一种有限的怪癖模式），并且在 XHTML1 中使用这种方法，父元素.boxcontainer总是完美地包裹在子.box元素周围。

.box但是，在处理 HTML5 中的一个新项目时，我发现在对齐的元素下方似乎添加了一条额外的线。您可以在此处看到一个示例：http: //jsfiddle.net/RZQTM/1/ - 单击Fiddle Options并将 DTD 更改为其他任何内容，您会明白我的意思 - 橙色“带”出现在下方合理的蓝色框。

我认为这归结为:after伪元素中的某些东西几乎就像一行内容一样被渲染，但我不知道如何修复它。任何有关如何删除框下多余空间的提示将不胜感激。

4

2 回答 2

5

我用来使这条额外的线消失的技巧是应用line-height:0;在 parent 上，然后重置line-height为 1.2em 或您设置的任何行高。vertical-align:top;/* 或 bottom */ on :after 元素最终会吞下任何留下的垂直间隙。

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

于 2013-07-08T20:49:02.560 回答
0

使用额外标记和使用 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如果元素服务于有用的目的（具有真实内容）并且如果您有其他原因使用表格单元格，例如垂直定位控制等，这种方法是理想的。

于 2013-07-08T21:35:45.713 回答