我是新的编程行业，特别是在CSS/HTML的东西。你们中有人知道如何改变文字的位置，或者如何在有演员图片的卡片旁边制作另一个包含所有信息的盒子/表格吗？
我是不是得做个新div什么的？添加到CSS的东西？
我的CSS：
body {
background: url('/static/images/backkk.jpg');
}
.navbar-inverse {
background-color: #222;
border-color: #080808;
}
.card{
display: inline-table ;
justify-content: space-evenly;
grid-template-columns: 300px;
grid-template-rows: 330px 300px 40px;
grid-template-areas: "image" "text" "stats";
border-radius: 7px;
background: url('/static/images/back.jpg');
box-shadow: 7px 7px 7px rgba(252, 135, 2, 0.9);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
border:3px solid rgb(255, 189, 7);
}
/*height card*/
.card-text
{
grid-area: text;
margin: 25px;
}
/* pilot*/
.card-text p {
color: rgb(16, 207, 144);
font-family: 'Times New Roman', Times, serif;
font-size:17px;
font-weight: 300;
border:"3px solid #73AD21";
text-align: center
}
.card-text h2 {
margin-top:20px;
font-size:23px;
}
/* lenght of card*/
.card {
transition: 0.5s ease;
cursor: pointer;
margin-top:-200px;
right: -30%;
width: 300px;
height: 35rem;
}我的HTML：
<!DOCTYPE html>
<html>
<body>
<div class="card" >
<div class="card-image">
<img src="{{ actor.picture }}" alt="No poster in datebase" width="289" height="345">
</div>
<div class="card-text">
<h2>
<a href="/actors/actor_detail/{{actor.id }}">{{ actor.name }}</a>
</h2>
</div>
<div class="card-text">
<p>Age: {{ actor.age}} </p>
<p>Net-worth: {{actor.net_worth}}</p>
<p>Date-of-birth: {{actor.date_of_birth}}</p>
<p>Children: {{actor.children}}</p>
<p>Marital-status: {{actor.marital_status}}</p>
</div>
</body>
</html>
2条答案
按热度按时间pexxcrt21#
我应该只使用表格创建新的html，然后使用{% extends 'table.html' %}吗？
uoifb46i2#
您需要创建另一个
div来将actor的信息放入其中。要在后面更改文本的位置，显然需要在CSS中创建文本的样式。要执行此操作，请使用属性：position:relative; top:0px; left:0px; margin-left:0px; margin-right:0px;（选择您喜欢的像素数）。我不确定是否理解你的疑问，但我的理解是，你想把相同的信息，下面的演员在右边...我说的对吗
这个红色边框的框是在描述图像中，你需要显示一个新的
div，里面的信息，需要文本元素或其他元素，你可以把信息。我希望这对你有帮助，这是我在Stack Overflow中的第一个答案。