缺少單元格的CSS表格佈局

我有來自外部源的HTML內容。被打上了div的，有點像這樣：現在缺少單元格的CSS表格佈局

<!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;   
}

然而，這種解決方案的問題在於，你可以看到，一些div缺少的HTML，但我想完成以下任務：

有每種信息都是垂直對齊的。換句話說，將上述示例中的每個出版物的年份顯示在與發佈者信息不同的列中。
將行着色擴展爲覆蓋每行的頁面寬度。

這是甚至有可能只使用CSS時，我有幾列？

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

來源

2013-06-03 Magnus Gustavsson

最終的答案，這個工作最好的：

.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-03 09:29:06 Alex

謝謝。解決了它的一部分，但不幸的是沒有對齊數據。 –

更新了我的答案。 – Alex

@Magnus Gustavsson - 改變了我的方法，這個作品最好 – Alex

這裏是一個工作的jsfiddle：http://jsfiddle.net/6Rwn2/

您需要設置空您的單元格的值沒有值。（例如放置一個空白區域 ）

來源

2013-06-03 09:41:24 Gimmy

謝謝，但它不是我的HTML，我感興趣的是如果我可以只使用CSS而不是通過更改HTML。我意識到我可以通過轉換數據來添加缺失的單元來解決這個問題。 –

爲什麼不對齊加載數據？
看到這裏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-03 09:55:14 user648026

缺少單元格的CSS表格佈局

回答

相關問題