Question

我有来自外部源的HTML内容。它用div标记，看起来有点像这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" href="mycss.css" type="text/css"/>
  </head>
  <body>
    <div class="book">
      <div class="author">Author 1</div>
      <div class="title">Title 1</div>
      <div class="publisher">Publisher</div>
      <div class="year">2012</div>
    </div>
    <div class="book">
      <div class="author">Author 2</div>
      <div class="title">Title 2</div>
      <div class="year">2013</div>
    </div>
    <div class="book">
      <div class="author">Author 3</div>
      <div class="title">Title 3</div>
      <div class="publisher">Publisher</div>
    </div>
  </body>
</html>

现在，它希望使用CSS在表格布局中显示它，每行都有交替的颜色。有点像这样：

body {
  display: table;
  width: 100%;
}

.book {
  display: table-row;
}

.book:nth-child(even) {
  background: #FFF;
}

.book:nth-child(odd) {
  background: #DDD;
}

.author, .title, .publisher, .year {
  display: table-cell;         
}

然而，这个解决方案的问题在于，正如您所看到的，HTML中缺少一些div，但我想完成以下任务：

将各种信息垂直对齐。换句话说，将上述示例中每个出版物的年份显示在与出版商信息不同的列中。
让行着色延伸以覆盖每行的页面宽度。

当我有多个列时，这甚至可以仅使用CSS吗？

摆弄 - http://jsfiddle.net/sRJhs/

Answer 1

最后的答案，这是最好的：

.book:nth-child(even) {
    background: #FFF;
}

.book:nth-child(odd) {
    background: #DDD;
}

.book {
    display: block;
    float: left;
    position: relative;
    width: 100%;
}

.book div {
    float: left;
    left: 100%;
    overflow: hidden;
    position: relative;
    width: 25%;
}
.author{
    margin-left: -100%;
}
.title{
    margin-left: -75%;
}
.publisher{
    margin-left: -50%;
}
.year {
    margin-left: -25%;
}

新小提琴 - http://jsfiddle.net/sRJhs/17/

Answer 2

这是一个有效的jsFiddle：http://jsfiddle.net/6Rwn2/

您需要为没有值的单元格设置空值。（例如，放一个空格 ）

Answer 3

为什么不在加载时对齐数据？
见这里http://jsfiddle.net/ryPPs/

$(document).ready(function() {
var emptyYearDiv = $('<div class="year">n/a</div>');
var emptyAuthorDiv = $('<div class="author">n/a</div>');
var emptyTitleDiv = $('<div class="title">n/a</div>');
 var emptyPublisherDiv = $('<div class="publisher">n/a</div>');
var emptyYearDiv = $('<div class="year">n/a</div>');

$(".book:not(:has(div[class^=year]))").append(emptyYearDiv);
$(".book:not(:has(div[class^=title]))").append(emptyTitleDiv);
$(".book:not(:has(div[class^=publisher]))").append(emptyPublisherDiv);
$(".book:not(:has(div[class^=year]))").append(emptyYearDiv);

}）;

缺少单元格的CSS表格布局

3 个答案: