相关疑难解决方法(0)

在处理布局时,我决定尝试将主要列的基于浮动的布局与子元素的基于表的布局相结合.因此,我的html/css标记是这样的:

HTML:

<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
...

CSS:

.column {
    float: left;
    display: table;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

具体的宽度和边距并不重要.有关参考示例,请参阅此jsFiddle.

我看到发生的事情是,每个列块在页面上从左到右,边距比上一个略小.由于没有额外的标记或CSS来实现这一点,我很困惑.在玩了不同的值之后,我发现注释display: table导致了我期望的正常行为,例如恒定的列宽.

现在,我可以使用替代方法来获得我想要的布局,这不是问题; 但我真的很好奇为什么会这样.有什么想法吗？

编辑

看起来这是一个webkit错误.display: table浮点数和边距在Firefox中运行良好.关于为后代修复webkit的任何建议？

进一步编辑

我刚刚在Safari中测试过它似乎也在那里工作.WTF Chrome ??

最终编辑

在Firefox 18,Safari和Chrome Canary(除标准Chrome之外)进行测试后,看起来这实际上是Chrome特有的错误.

最简单的解决方法是在每个被浮动的内容中添加一个简单的附加包装div以包含内容并将包装器的CSS设置为width: 100%; height:100%; display: table;,然后display: table从浮动的外部元素中删除.奇迹般有效.

http://jsfiddle.net/XMXuc/8/

HTML:

<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div> …

这个问题来自我提供解决方案的现有问题,但无法解释为什么.

我已经将他们的小提琴剥离到裸骨,并具有以下HTML/CSS:

<div class="table">
  <span class="cell-1">cell 1</span>
  <span class="cell-2">cell 2</span>
</div>

.table {
  display: table;
}

.cell-1, .cell-2 {
  display: table-cell;
  padding: 6px 12px;
  border: 1px solid #ccc;
}

.cell-1 {
  padding: 6px 12px;
  background-color: #eee;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  width: 1%; /* *** FOCUS HERE *** */
}

.cell-2 {
  border-radius: 0 4px 4px 0;
}

只有.cell-1一个宽度,即1%.这是结果(小提琴链接):

如果我然后将宽度增加到宽度.cell-1超过其内容的值,比如10%(我认为这是模式),那么第二个单元格将变得更窄.为什么？那个宽度来自哪里？ 这是结果(小提琴链接).

如果我然后采取第二个例子,但添加width: 100%到.table那么它再次回到100%. 这是结果(小提琴链接).

我确信这是一个合乎逻辑的解释,但我只是没有看到它.任何人？

我正在检查Github如何显示以下菜单:

如果您注意到,每个菜单项的宽度相等.在CSS中,我们应该给它任何百分比值,这背后的原因是什么？注意父div没有给出display:table属性.

div {
  border: 1px solid #000;
  border-radius: 4px;
}

div ul {
  padding: 0;
  margin: 0;
}

div ul li {
  display: table-cell;
  width: 1%;
  text-align: center;
  border-right: 1px solid #000;
  padding: 10px 0;
}

div ul li:last-child {
  border-right: 0;
}

<div>
  <ul>
    <li><a href="#">Commits</a>
    </li>
    <li><a href="#">Branch</a>
    </li>
    <li><a href="#">Contribution</a>
    </li>
    <li><a href="#">anything</a>
    </li>
  </ul>
</div>

宽度百分比背后的原因是什么？