小编kla*_*sen的帖子

我有以下代码:

<div contenteditable="true" id="editor">
    <p>This is example text with <span class="spoiler">spoiler<strong>s</strong></span></p>
  <p>The <span class="spoiler">spoiler</span> exists in multiple paragraphs</p>
</div>
<button onclick="removeSpoiler();">remove spoiler</button>

用户可以选择文本,然后单击按钮以删除<span class="spoiler">格式.单击按钮后,仍必须选中文本.

例如:用户选择"with spoilers.sp".他点击了"删除剧透".所需的输出是:

<div contenteditable="true" id="editor">
    <p>This is example text with spoiler<strong>s</strong></p>
  <p>The sp<span class="spoiler">oiler</span> exists in multiple paragraphs</p>
</div>
<button onclick="removeSpoiler();">remove spoiler</button>

我尝试的一个小问题(我真的不知道从那里去哪里):http://jsfiddle.net/632cr/

我正在努力学习flexbox,但我很难理解这个概念.我想创建一个电子邮件列表,其中每个项目都是一个flexbox容器(见下文).

规则:

• 标签是可选的,但如果显示,则直接显示在名称旁边.
• 日期始终存在,宽度变化
• 该人的姓名填补剩余空间.如果它变大,它就会被截断.
• 名称和标签之间的空格始终为5px
• 邮件主题显示在新行上,也会被截断

到目前为止我的尝试:https://jsbin.com/sepobipiwa/edit？html,css,output

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject { …

是否可以限制CSS网格列的宽度？

body {
  margin: 0;
  padding: 0;
}
.container {
    display: grid;
    grid-template-columns: minmax(17.5%, 250px) minmax(31.25%, 480px) auto;
    grid-template-rows: 100vh;
    grid-gap: 0;
}
.menu {
    padding-top: 32px;
    background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
    background-color: #F5F5FC;
}

<div class="container">
  <div class="menu"></div>
  <div class="list-view"></div>
  <div class="details"></div>
</div>

在上面的示例中,它总是使用17.5%的宽度作为菜单,因为:

"如果max小于min,则忽略max,并将该函数视为min."

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

我想要的是一个宽度为17.5%,最大为250px的菜单.那可能吗？

我正在构建类似于Tinder的功能.人们可以"喜欢"或"跳过"其他人的照片,如果两个人彼此"喜欢"那么就会有匹配.

此功能的数据库结构的最佳方法是什么？我希望能够获得所有比赛的列表以及每个人的所有比赛.

方法1:

Person | JudgedPerson | Like
------ | ------------ | ----
1      | 2            | yes
2      | 1            | yes
1      | 3            | yes
3      | 1            | no
2      | 3            | yes

这看起来像是一种逻辑方法,但很难创建MySql查询来发现匹配.或者有一种简单的方法可以发现它吗？

方法2

Person1 | Person2 | P1LikesP2 | P2LikesP1
------- | ------- | --------- | ---------
1       | 2       | yes       | yes
1       | 3       | yes       | no
2       | 3       | yes       | null

创建查询以获得匹配很容易,但数据模型可能不是最好的.

什么是最好的方法？如果方法1是最好的方法,我可以用什么mysql查询来发现匹配？

这可能是一个愚蠢的问题,但为什么第一个孩子/最后一个孩子没有在块引用上工作？

CSS

p { margin: 0 0 1.6em 0; }
blockquote { margin: 0; padding: 0 25px 1em; background-color: #CCC; border-left: 5px solid #333; }
blockquote:first-child { padding-top: 25px; color: red; }
blockquote:last-child { padding-bottom: 25px; margin-bottom: 1em; color: yellow; }

HTML

<div>
    <p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu …