javascript - 标签弄乱了我在 Photoshop 中的切片布局
问题描述
我觉得我完全被难住了。我试过高度：100%；修复，但这不起作用。此外，根据 W3C，我的 html 和 css 都是有效的。最后，我读到这种布局已经被贬低了，这并没有帮助，但是我在这个项目上花了很多时间，我想克服这个小问题，这样我就能得到一个像样的最终产品。
这是实时代码... http://valeriehosler.com
这是我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Next to Normal Story Map by Valerie Hosler</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table id="Table_01">
<tr>
<td colspan="11">
<img src="images/Next-to-Normal-New_01.gif" width="1440" height="242" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="242" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/Next-to-Normal-New_02.gif" width="496" height="316" alt=""></td>
<td>
<a data-toggle="modal" data-target="#Diana2"><img src="images/Diana.gif" width="93" height="68" alt=""></a>
</td>
<td colspan="3" rowspan="2">
<img src="images/Next-to-Normal-New_04.gif" width="389" height="204" alt=""></td>
<td>
<a data-toggle="modal" data-target="#Dan2"><img src="images/Gabe.gif" width="93" height="68" alt=""></a>
</td>
<td colspan="3" rowspan="3">
<img src="images/Next-to-Normal-New_06.gif" width="369" height="316" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="68" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Next-to-Normal-New_07.gif" width="93" height="590" alt=""></td>
<td rowspan="6">
<img src="images/Next-to-Normal-New_08.gif" width="93" height="590" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="136" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/Next-to-Normal-New_09.gif" width="29" height="454" alt=""></td>
<td rowspan="2">
<a data-toggle="modal" data-target="#Logo2"><img src="images/Logo.gif" width="294" height="154" alt=""></a>
</td>
<td rowspan="5">
<img src="images/Next-to-Normal-New_11.gif" width="66" height="454" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="112" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Next-to-Normal-New_12.gif" width="272" height="342" alt=""></td>
<td rowspan="3">
<a data-toggle="modal" data-target="#Gabe2"><img src="images/Gabe-14.gif" width="85" height="83" alt=""></a>
</td>
<td rowspan="4">
<img src="images/Next-to-Normal-New_14.gif" width="139" height="342" alt=""></td>
<td rowspan="4">
<img src="images/Next-to-Normal-New_15.gif" width="153" height="342" alt=""></td>
<td rowspan="2">
<a data-toggle="modal" data-target="#Natalie2"><img src="images/Natalie.gif" width="81" height="79" alt=""></a>
</td>
<td rowspan="4">
<img src="images/Next-to-Normal-New_17.gif" width="135" height="342" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="42" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/Next-to-Normal-New_18.gif" width="294" height="300" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Next-to-Normal-New_19.gif" width="81" height="263" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Next-to-Normal-New_20.gif" width="85" height="259" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="259" alt=""></td>
</tr>
</table>
<div id="Diana2" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Diana</h1>
</div>
<div class="modal-body">
<div style="margin-bottom: 20px;">
<p style="font-size: 16px !important; margin-top: 0 !important;">
Diana is the matriarch of the family. She's witty, electric, creative, and she also has Bipolar I disorder. Throughout the musical, she struggles to juggle being a caretaker to her family and herself.
</p>
<p style="font-size: 16px !important;">
In <i>I Miss the Mountains</i>, Diana reminisces about what it felt like to be off psychiatric medication and be able to "see" (AKA hallucinate) her deceased son again. In the end, she decides to dispose of her medication, with
disastrous results.
</p>
</div>
<div class="center">
<video width="320" height="240" controls>
<source src="Mountains.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="btncenter">
<button type="button" class="btn btn-primary" data-dismiss="modal">Back to the Story Map</button>
</div>
</div>
</div>
</div>
<div id="Dan2" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Dan</h1>
</div>
<div class="modal-body">
<div style="margin-bottom: 20px;">
<p style="font-size: 16px !important; margin-top: 0 !important;">
Dan is the patriarch of the family. He's loyal, consistent, but also incredibly mentally fatigued. Throughout the musical, he is the glue that holds the family together.
</p>
<p style="font-size: 16px !important;">
In <i>I Am the One</i>, Dan reminds Diana that he has always been there for her. However, Diana is torn between him and her deceased son.
</p>
</div>
<div class="center">
<video width="320" height="240" controls>
<source src="One.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="btncenter">
<button type="button" class="btn btn-primary" data-dismiss="modal">Back to the Story Map</button>
</div>
</div>
</div>
</div>
<div id="Gabe2" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Gabe</h1>
</div>
<div class="modal-body">
<div style="margin-bottom: 20px;">
<p style="font-size: 16px !important; margin-top: 0 !important;">
Gabe is Diana and Dan's deceased, infant son. In the musical, Diana hallucinates a late-teenage aged version of Gabe when she is unmedicated. He's portayed as attractive, charismatic, and manipulative.
</p>
<p style="font-size: 16px !important;">
In <i>I'm Alive</i>, Gabe attempts to convince Diana that he is more than a hallucination.
</p>
</div>
<div class="center">
<video width="320" height="240" controls>
<source src="Alive.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="btncenter">
<button type="button" class="btn btn-primary" data-dismiss="modal">Back to the Story Map</button>
</div>
</div>
</div>
</div>
<div id="Natalie2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Natalie</h1>
</div>
<div class="modal-body">
<div style="margin-bottom: 20px;">
<p style="font-size: 16px !important; margin-top: 0!important;">
Natalie is Diana and Dan's living, teenage daughter. In the musical, Diana describes her as a "genius, but a freak". She dreams of escaping her family.
</p>
<p style="font-size: 16px !important;">
In <i>Everything Else</i>, Natalie sings while playing one of Mozart's sonatas for piano. She describes how her musical aspirations make everything else in her life disappear.
</p>
</div>
<div class="center">
<video width="320" height="240" controls>
<source src="EverythingElse.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="btncenter">
<button type="button" class="btn btn-primary" data-dismiss="modal">Back to the Story Map</button>
</div>
</div>
</div>
</div>
<div id="Logo2" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Next to Normal</h1>
</div>
<div class="modal-body">
<div style="margin-bottom: 20px;">
<p style="font-size: 16px !important; margin-top: 0 !important;">
Next to Normal is a 2008 rock musical that was created by Brian Yorkey. It follows a woman with worsening Bipolar I disorder and her suburban family.
</p>
<p style="font-size: 16px !important;">
In <i>Just Another Day</i>, the audience is introduced to the entire family. Though it seems like everyone is there, it is eventually revealed that Gabe is actually deceased, but manifests as a hallucination.
</p>
</div>
<div class="center">
<video width="320" height="240" controls>
<source src="N2NSONG.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="btncenter">
<button type="button" class="btn btn-primary" data-dismiss="modal">Back to the Story Map</button>
</div>
</div>
</div>
</div>
<div id="hello" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Next to Normal</h1>
</div>
<div class="modal-body">
<div style="margin-bottom: 5px;">
<p style="font-size: 16px !important;">
Welcome to the Next to Normal Story Map! I created this interactive map because I love this musical and I wanted to share a slice of it with you. Click on the GIFs to learn more about the show while listening to great music!
</p>
</div>
<div class="btncenter2">
<button type="button" class="btn btn-primary" data-dismiss="modal">Back to the Story Map</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(window).on('load', function() {
$('#hello').modal('show');
});
</script>
</body>
</html>这是我的 CSS
html, body {
height: 100%;
background: #000000;
}
h1 {
border-bottom: 2px solid #7f479e;
font-family: 'Merriweather', serif;
margin-bottom: 0;
}
h4 {
margin: 0;
}
img {
border: 0;
}
p {
padding: 0;
}
table#Table_01 {
border-spacing: 0;
height: 900px;
margin: 0;
padding: 0;
width: 1441px;
}
.center {
margin: 0 auto 0 auto;
position: relative;
text-align: center;
}
.btncenter {
margin: 0 auto 0 auto;
padding: 10px 0 25px 0;
text-align: center;
}
.btncenter2 {
margin: 0 auto 0 auto;
padding: 10px 0 5px 0;
text-align: center;
}
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #7f479e !important;
border-color: #000000 !important;
}
.modal-header {
border-bottom: 0 solid #ffffff !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}我感谢任何和所有的反馈！
解决方案
删除 doctype 声明。
对于您的下一个项目，不要使用诸如 Photoshop 之类的工具来生成 HTML，因为正如您所了解的那样，它并不擅长。使用 doctype 声明。
推荐阅读
- r - 如何使用ggplot2随着时间的推移绘制p值？
- ansible - 如何使用 Ansible 在 RHEL 8 中设置静态路由？
- laravel - 使用中间件清除缓存
- arduino - Esp32 摇杆鼠标
- python - 在 Python 中通过 Selenium 抓取 Google 地图
- python-3.x - VScode - Linux 风格的“信息/帮助”命令扩展
- c# - 如何在统一 c# 中切换？
- python-3.x - 环境变量适用于 Django 的服务器，但不适用于 Apache 服务器
- oracle - 如何使用没有连接的联合合并 3 个表？
- javascript - Vuejs 通过使用计算工作，但不能使用 heroku 上的数据工作