Question

我有一个非常简单的任务（对我很耐心，我对这一切都很陌生）：我有一个桌子里面有一个桌子，桌子上有一排和两个单元格，并排。一个单元格包含标题文本，下一个单元格包含一段正文文本。它在大屏幕上看起来很棒，在小屏幕上看起来很糟糕。因此，当视口宽度低于890px时，我想通过将单元格分成两个不同的行来将两者堆叠在一起。

首先，让我说，是的，我必须使用该表。我知道使用表格进行布局是笨重的，但是必须将div中的所有内容垂直居中。

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

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

所以我使用\r\n\代替\n\为初始状态创建了第二个变量，因为我读到某些浏览器以不同方式执行换行。检查当前表内容是否等于其中任何一个。不。

这里发生了什么？

Answer 1

表格不应用于页面布局。有很多css技巧来对齐div和里面的内容。对于响应式设计，您可以使用bootstrap。请参阅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>

或使用媒体查询编写您自己的响应式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%;}
}

希望这能帮助你设计..

JQuery：比较两个多行字符串，一个从HTML中删除 - 不工作？

1 个答案: