我能够创建一个传记卡片，然后将其复制到我支持的单元中的一门课程的多张卡片中。我对来自不同来源的一些不同的代码段进行了部分研磨，结果如下所示。
我遇到的问题是...我只能打开前两张卡。我可以在下面打开汤姆和哈利，但不能打开史蒂夫和彼得。
P.S。我可以将卡排成一行的唯一方法是使用table tr和td代码。我还必须为.p和.ul（即.p.ex1和.ul.ex2）创建自定义CSS，因为如果不这样做，它将覆盖我的母版页面的CSS和混乱的东西在我的SP网站上。
我是HTML，CSS等的新手，所以请详细解释新手可以理解的答案：）谢谢！
任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 200px;
margin: 20px;
text-align: center;
font-family: arial;
padding-bottom: 2px;
}
.name{
color:#800000;
font-size:24px;
font-family: segoe UI;
font-weight: bold;
display: inline;
}
.instructor {
color: #000;
font-size: 18px;
}
.categories {
color: #000;
font-size: 24px;
font-family: segoe UI;
font-weight: bold;
display: inline
}
p.ex1, ul.ex2 {
display: inline;
}
.MyButton {
border-top: 1px solid #c0c0c0;
background: #1c4168;
background: -webkit-gradient(linear, left top, left bottom, from(#1c4168), to(#1c4168));
background: -webkit-linear-gradient(top, #1c4168, #1c4168);
background: -moz-linear-gradient(top, #1c4168, #1c4168);
background: -ms-linear-gradient(top, #1c4168, #1c4168);
background: -o-linear-gradient(top, #1c4168, #1c4168);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #eccc13;
font-size: 13px;
font-weight: bold;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
margin-right: 8px;
}
.MyButton:hover {
border-top-color: #c0c0c0;
background: #c0c0c0;
color: #800000;
}
.MyButton:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="card">
<img src="#" alt="Tom" style="width:100%">
<p class="name">Tom</p>
<p class="instructor">Commander</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openTom()">BIO</button></p>
<div style="display:none">
<div id="Tom">
<p class="ex1"><strong>Tom</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
<td>
<div class="card">
<img src="#" alt="Harry" style="width:100%">
<p class="name">Harry</p>
<p class="instructor">Course Manager</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openHarry()">BIO</button></p>
<div style="display:none">
<div id="Harry">
<p class="ex1"><strong>Harry</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="card">
<img src="#" alt="Steve" style="width:100%">
<p class="name">Steve</p>
<p class="instructor">Instructor</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openSteve()">BIO</button></p>
<div style="display:none">
<div id="Steve">
<p class="ex1"><strong>Steve</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
<td>
<div class="card">
<img src="#" alt="Peter" style="width:100%">
<p class="name">Peter</p>
<p class="instructor">Instructor</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openPeter()">BIO</button></p>
<div style="display:none">
<div id="Peter">
<p class="ex1"><strong>Peter</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
<script>
function openTom() {
var e = document.getElementById('Tom');
var options = {
title: "Tom",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
function openHarry() {
var e = document.getElementById('Harry');
var options = {
title: "Harry",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
function openSteve() {
var e = document.getElementById('Steve');
var options = {
title: "Steve",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
function openPeter() {
var e = document.getElementById('Peter');
var options = {
title: "Peter",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>
</body>
</html>