CSS中的HTML colspan

Question

我正在尝试构建类似于以下内容的布局:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

底部填充上排空间.

如果这是一个真正的表,我可以很容易地实现这一点<td colspan="3">,但由于我只是创建一个类似于表的布局,我不能使用<table>标签.这可能使用CSS吗？

Answer 1

没有简单,优雅的CSS模拟colspan.

对这个问题的搜索将返回各种解决方案,其中包括一系列替代方案,包括绝对定位,大小调整,以及类似的各种浏览器和特定情况的警告.阅读,根据您的发现做出最明智的决定.

Answer 2

据我所知,css中没有colspan,但column-span在不久的将来会有多列布局,但由于它只是CSS3中的草稿,你可以在这里查看.无论如何,你可以使用div和span像这样的表格式显示做一个解决方法.

这将是HTML:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

这将是css:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

使用这个技巧的唯一原因是为了获得table-layout行为的好处,如果仅将div和span宽度设置为某个百分比并未满足我们的设计要求,我会使用它.

但如果你不需要从这种table-layout行为中受益,那么durilai的回答就足够了.

Answer 3

另一个建议是使用flexbox而不是表格.这当然是一个"现代浏览器"的东西,但是来吧,它是2016年;)

至少这可能是那些寻求现在答案的人的替代解决方案,因为最初的帖子是从2010年开始的.

这是一个很棒的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}

<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>

Answer 4

<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

Answer 5

提供最新的答案：今天最好的方法是使用 css 网格布局，如下所示：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

和 HTML

<div class="container">
  <div class="item-a">1</div>
  <div class="item-b">2</div>
  <div class="item-c">3</div>
  <div class="item-d">123</div>
</div>

Answer 6

这不是 CSS 权限的一部分。 colspan描述页面内容的结构，或者给表格中的数据赋予一些意义，这是 HTML 的工作。