JQuery:比较两个多行字符串，其中一个是从HTML中提取的-不起作用吗？

Question

我有一个令人抓狂的简单任务(请耐心等待，我是个新手)：我有一个包含表的div，表包含一行和两个单元格，它们并排在一起。一个单元格包含标题文本，下一个单元格包含正文文本段落。它在大屏幕上看起来很棒，但在小屏幕上就不好了。因此，当视口宽度低于890px时，我希望通过将单元格分解为两个不同的行来将这两个单元格堆叠在一起。

首先，我要说的是，是的，我必须使用这张桌子。我知道使用表格进行布局很笨拙，但这对于垂直居中div中的所有内容都是必要的。

因此，我对这个问题的解决方案是编写一些JQuery，它将获取使用html()方法获取的表的当前内容，将它们与表的“初始状态”内容(在较大的视口宽度上)进行比较，然后将内容替换为“最终状态”字符串，该字符串只是将</tr><tr>插入到第一个单元格的</td>标记之后。

包含初始状态表内容的变量与html()方法返回的表内容完全相同，但是除了最后一行(额外的反斜杠告诉JS这是一个多行字符串)之外，每行的末尾都有\n\。我在MATLAB中的字符串上运行了一个strcmp，以确保我没有犯任何愚蠢的错误，结果是正确的。当我要求JS将这两个字符串打印到控制台时，它们看起来是一样的。但当我问JS它们是否是==时，得到的结果是假的。

所以我用\r\n\而不是\n\为初始状态设置了第二个变量，因为我读到有些浏览器处理换行符的方式不同。检查当前表内容是否等于这两个表中的任何一个。不是的。

这里发生了什么事？

Answer 1

表格不应用于页面布局。有大量的css技巧可以将div和其中的内容对齐。对于响应式设计，您可以使用bootstrap。请参阅bootstrap，或者您可以使用媒体查询来编写自己的响应式设计。引导程序代码应如下所示

<div class="row">
    <div class="col-lg-6 col-sm-12">

            //some code for part1

    </div>
    <div class="col-lg-6 col-sm-12">

            //some code for part1

    </div>
</div>

或者使用media query编写您自己的响应式CSS。HTML代码是：

<div> <!-- header wrapper -->
 <div class="menu1 col-1">
    //some code
 </div>
 <div class="menu2 col-2">
    //some code
 </div>
</div>

CSS文件将为：

.menu1,menu2 {
   display: inline-block;
   width: auto;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
 /* For desktop: */
@media only screen and (min-width: 768px) {

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
}

希望这能对你的设计有所帮助..