Question

这里有两个代码。在每一个中你都会注意到绿色区域。在其中一个中，这是用表格完成的，另一个是使用了div。还要注意调整窗口大小时的行为。

表格代码：http://codepen.io/anon/pen/Kmdca?editors=110和 div codepen ：http://codepen.io/anon/pen/tDhIG?editors=110 所以竞争的部分是：

表码笔：

<table class="information_table">
<tr><td></td><td></td><td></td><td></td></tr>
    <tr>
    <td colspan="2"><span class="prodinfo_title">Auteur: </span>Onbekend</td>
    <td><span class="prodinfo_title">Formaat: </span>37 x 23 cm</td>
    <td><span class="prodinfo_title">Prijs: </span>1900</td>
    </tr>
    <tr>
    <td colspan="2"><span class="prodinfo_title">Uitgever: </span>Pieter Jacob Paets Jan Moerentorf</td>
    <td><span class="prodinfo_title">Jaar v. uitgave: </span>1646</td>
    <td><span class="prodinfo_title">Aantal pg: </span>4 + 1265 +1 +468</td>    
    </tr>
    </table>

vs

div codepen ：

<div class="info_box">
  <div class="row">
    <div class="column big"><span class="prodinfo_title">Auteur: </span>Onbekend</div>
    <div class="column"><span class="prodinfo_title">Formaat: </span>37 x 23 cm</div>
    <div class="column"><span class="prodinfo_title">Prijs: </span>1900</div>
  </div>
  <div class="row">
    <div class="column big"><span class="prodinfo_title">Uitgever: </span>Pieter Jacob Paets Jan Moerentorf</div>
    <div class="column"><span class="prodinfo_title">Jaar v. uitgave: </span>1646</div>
    <div class="column"><span class="prodinfo_title">Aantal pg: </span>4 + 1265 +1 +468</div>
  </div>         
</div>

我想要实现的是

表格中显示的绿色区域分为4个相等的部分，其中第一列存在2个这些部分。由于表格代码簿没有使用完整的可用空间而且 div codepen 没有正确地自动划分空间，所以都没有真正解决这个问题。
当处于最大宽度时，2个绿色区域中的红色文字与 div codepen 中的相同水平位置相同（此行为除非是小尺寸，其中1个框在浮动下跳跃
当调整大小时，所有信息在整个浮动div下跳转，就像在表codepen 中一样。 div codepen 无法正确执行此操作。另外1行必须保留1行， div codepen 也无法做到这一点
连续的红色文字位于同一垂直高度。 div codepen 不会执行此操作

所以目前表码本表现最佳，除了在不同的表中水平对齐红色文字并可选地使用可用空间。

Answer 1

最终解决方案来自csstricks：http://css-tricks.com/forums/topic/colspan-problem/page/2/。由于错误的语义，我们删除了表，并设法通过列表获得所需的效果： http://codepen.io/wolfcry911/pen/mJsrp

HTML

<ul>
     <li><h4>Auteur:</h4>Amelotto Della Houssaia</li>
     <li><h4>Formaat:</h4>/</li>
     <li><h4>Prijs:</h4>200</li>
     <li><h4>Uitgever:</h4>Pietro Del Martello</li>
     <li><h4>Jaar v. uitgave:</h4>0</li>
     <li><h4>Aantal pg:</h4>246+242</li>
</ul>

CSS

ul {
 margin: 10px 0 10px 100px;
 padding: 0;
 background: #6C9;
 overflow: hidden;
 position: relative;
 font-size: 0.8em;
 list-style: none;
  }

li {
 float: left;
 width: 25%;
 padding: 4px;
 box-sizing: border-box;
}

li h4 {
 color: #b02a0a;
 float: left;
 margin: 0 4px 0 0;
}

li:nth-child(3n+1) {
 width: 50%;
 clear: left;
}

表colspan修复

1 个答案: