gpt4 book ai didi

缺少单元格的 CSS 表格布局

转载 作者:太空宇宙 更新时间:2023-11-04 00:00:36 24 4
gpt4 key购买 nike

我有来自外部来源的 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/

最佳答案

最终答案,这个效果最好:

.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%;
}

新 fiddle - http://jsfiddle.net/sRJhs/17/

关于缺少单元格的 CSS 表格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16893560/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com