0

我有来自外部来源的 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，但我想完成以下操作：

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

当我有几列时，这甚至可能只使用 CSS 吗？

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

4

3 回答 3

2

最终答案，这效果最好：

.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/

于 2013-06-03T09:29:06.833 回答
1

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

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

于 2013-06-03T09:41:24.247 回答
0

为什么不对齐加载数据？
见这里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);

});

于 2013-06-03T09:55:14.387 回答