如何使用CSS在有背景的表中定位文本

我正在尝试打印光盘带。我已经编写了一些代码，可以生成html页面来显示条形图，然后您可以打印它们。自动存储塔具有选择按钮，如ABCDEFGHJK和1234567890。为了更容易地用条形图加载插槽，我想在卡的角落打印该标志，一旦插入，它就看不见了。在切割完所有打印的条形图并将其插入正确的插槽后，这会更容易。

但无论我尝试什么，打印这个指示符都会移动条形图上的文本，这当然不是我想要的。

到目前为止，我的代码如下：

<!doctype html>
<html>
<head>
<style type="text/css">
.card {
width: 3in;
height: 1in;
background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
background-size: 3in 1in;
}

.line {
width: 3in;
height: 7mm;
text-align: center;
font-family: Georgia, serif;
}

.cardnumber {
font-size: 5px;
top: auto;
z-index: 100;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="card">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line">Let It Be</td>
</tr>
<tr>
<td class="line">Beatles</td>
</tr>
<tr>
<td class="line">Yellow Submarine</td>
</tr>
</table>
<div class="cardnumber">H1<br>H2</div>
</td>
<td class="card">
<table cellspacing="0" cellpadding="0">
<tr>
<div class="cardnumber">J7<br>J8</div>
<td class="line">Bad</td>
</tr>
<tr>
<td class="line">Michael Jackson</td>
</tr>
<tr>
<td class="line">Liberian Girl</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

我也试过各种各样的position: absolute和postion: relative，但我做不好。

有什么改变的想法吗？

开始的几件事：

<table/>标记实际上是用于表格数据；将它用于其他任何事情，包括布局，都不是很理想。考虑到这些内容似乎不是表格形式的，我认为这不是标签的语义使用。虽然这可能只是为了打印一些东西，但即使在这种情况下，您仍然会与<table/>标签的布局方法作斗争
以这种方式定位内容，叠加在某种背景上，在这种背景下放置是至关重要的，这似乎是一个困难的前端挑战

当我接受这样的挑战时，我通常更喜欢看看是否有一种方法可以用代码生成设计，或者是否可以将资产分割成组件以简化编码方法。也就是说，可以通过你所寻求的方式，在背景图像上做到这一点。在这种情况下，我的建议是利用absolute定位。

.cardwrapper {
display: flex;
}
.card {
width: 3in;
height: 1in;
background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
background-size: 3in 1in;
position: relative;
}
.info {
position: absolute;
width: 100%;
text-align: center;
}
.title {
top: .09in;
}
.artist {
top: .39in;
}
.album {
top: .666in;
}
.cardnumber {
position: absolute;
bottom: 0;
font-size: 5px;
}

<div class="cardwrapper">
<div class="card">
<div class="info title">Let It Be</div>
<div class="info artist">Beatles</div>
<div class="info album">Yellow Submarine</div>
<div class="cardnumber">H1<br>H2</div>
</div>
<div class="card">
<div class="info title">Bad</div>
<div class="info artist">Michael Jackson</div>
<div class="info album">Liberian Girl</div>
<div class="cardnumber">J7<br>J8</div>
</div>
</div>

我观察了一下这个位置——你可以根据需要进行调整。您可以在.cardwrapper上使用不同的显示模式来更改卡片本身的布局方式(我在这里使用了flex)。从你的问题中看不出你想把卡号放在哪里——我把它放在右下角，但你可以看到它是如何调整的。

我没有花太多时间来决定卡片内容最具语义的元素是什么——我的直觉可能是<dl>/<dt>/<dd>元素，但你可以做出这个决定。此外，如果这真的只是为了打印，那么它可能就不那么关键了。

您可以通过定位来完成，只需要将父级(.card)设置为relative，然后将子级(.cardnumber)设置为absolute。然后你可以把数字从流中去掉，然后把它们放在任何地方。

.card {
width: 3in;
height: 1in;
position: relative;
background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
background-size: 3in 1in;
}
.line {
width: 3in;
height: 7mm;
text-align: center;
font-family: Georgia, serif;
}
.cardnumber {
margin: 0;
position: absolute;
font-size: 5px;
top: 4px;
left: 4px;
z-index: 100;
}

<html>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="card">
<table cellspacing="0" cellpadding="0">
<tr>
<div class="cardnumber">H1<br>H2</div>
<td class="line">Let It Be</td>
</tr>
<tr>
<td class="line">Beatles</td>
</tr>
<tr>
<td class="line">Yellow Submarine</td>
</tr>
</table>
</td>
<td class="card">
<table cellspacing="0" cellpadding="0">
<tr>
<div class="cardnumber">J7<br>J8</div>
<td class="line">Bad</td>
</tr>
<tr>
<td class="line">Michael Jackson</td>
</tr>
<tr>
<td class="line">Liberian Girl</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

嘿，你可以对行类使用高度：0.33in，并在第二张中的后移动

卡号J7J8行请检查此示例。。。

<!doctype html>
<html>
<head>
<style type="text/css">
.card {
width: 3in;
height: 1in;
background-image: url(http://www.videofrank.nl/images/jukestrip.jpg);
background-size: 3in 1in;
}

.line {
width: 3in;
height: 0.33in;
text-align: center;
font-family: Georgia, serif;
}

.cardnumber {
font-size: 5px;
top: auto;
z-index: 100;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="card">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line">Let It Be</td>
</tr>
<tr>
<td class="line">Beatles</td>
</tr>
<tr>
<td class="line">Yellow Submarine</td>
</tr>
</table>
<div class="cardnumber">H1<br>H2</div>
</td>

<td class="card">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="line">Bad</td>
</tr>
<tr>
<td class="line">Michael Jackson</td>
</tr>
<tr>
<td class="line">Liberian Girl</td>
</tr>
</table>
<div class="cardnumber">J7<br>J8</div>
</td>
</tr>
</table>
</body>
</html>

相关内容

最新更新

热门标签：