Question

我有以下情况：

此HTML动态生成并不断增长。

<div id="messages">
    <div class="message person-1">
    <div class="message person-1">
    <div class="message person-2">
    <div class="message person-2">
    <div class="message person-2">
    <div class="message person-1">
    ...
</div>

应用正常样式我明白了：

Chat styling

但是，我希望由同一个人对连续的消息进行分组。这意味着，对于每个连续的组，当他们不是第一个或最后一个孩子并且还改变第一个和最后一个孩子的边界半径时，删除连续课程之间的边距。

我已经调查了这个问题：http://www.sitepoint.com/contiguous-sibling-selector/但不知道如何让它适用于不确定长度的列表。

这有可能吗？

Answer 1

在不更改HTML的情况下，我们可以使用+选择器从同一个人中选择连续的消息。然后我们可以重叠边界半径来隐藏它：

.person-1 + .person-1,
.person-2 + .person-2 {
  margin: -10px 5px 0;
}

messages example

完整示例

＆＃13;

#messages {
  width: 200px;
}
.message {
  padding: 10px;
  color: #FFF;
  margin: 5px 5px 0;
  width: 100px;
  border-radius: 5px;
}
.person-1 {
  background: green;
  float: left;
  clear: both;
}
.person-2 {
  background: purple;
  float: right;
  clear: both;
}
.person-1 + .person-1,
.person-2 + .person-2 {
  margin: -10px 5px 0;
}
img {
  padding-top: 10px;
}

＆＃13;

<div id="messages">
  <div class="message person-1">Hello How are you?</div>
  <div class="message person-2">Good thanks</div>
  <div class="message person-2">and you?</div>
  <div class="message person-2">:)</div>
  <div class="message person-1">I'm so great!</div>
  <div class="message person-2">Awesome</div>
  <div class="message person-1">Yeah!</div>
  <div class="message person-2">Plz Respond</div>
  <div class="message person-2">Plz Respond</div>
  <div class="message person-2">Plz Respond
    <img src="http://www.placehold.it/100x100">
  </div>
  <div class="message person-2">Plz Respond</div>
  <div class="message person-1">Yeah!</div>
  <div class="message person-1">hi!</div>
  <div class="message person-1">hi!</div>
</div>

＆＃13;

Answer 2

可以消除边距（如果您只使用margin-top在这些元素之间创建边距），并且可以消除所有元素的border-radius相同类型，如下：

.message { clear:both; margin-top:.5em; padding:.5em; width:5em; border-radius:.5em; }
.person-1 { float:left; background:green; }
.person-2 { float:right; background:blue; }
.person-1 + .person-1, .person-2 + .person-2 { margin-top:0; border-radius:0; }
.person-1:first-child, .person2 + .person-1,
.person-2:first-child, .person-1 + .person-2 { border-radius:.5em .5em 0 0; }

<div id="messages">
    <div class="message person-1">foo</div>
    <div class="message person-1">bar</div>
    <div class="message person-1">baz</div>
    <div class="message person-2">abc</div>
    <div class="message person-2">def</div>
    <div class="message person-1">ghi</div>
</div>

然而，这将留下“group”的最后一个元素，底部也没有border-radius;并且无法轻易修复，因为您无法通过之后来选择元素，只能通过之前的来选择元素 - 因此保持border-radius到位对于小组改变之前的最后一个元素，我认为是不可能的。

现在，如果你只想使用纯色背景颜色而没有不透明度/ alpha通道，并且每个元素都有足够的填充，正如你的截图所示 - 那么你可以简单地保留所有元素的border-radius，并通过将元素相互拖动一点负边距来“消除”它，如下所示：

.message { clear:both; margin-top:.5em; padding:.5em; border-radius:.5em; width:5em; } .person-1 { float:left; background:green; } .person-2 { float:right; background:blue; } .person-1 + .person-1, .person-2 + .person-2 { margin-top:-.75em; }

<div id="messages"> <div class="message person-1">foo</div> <div class="message person-1">bar</div> <div class="message person-1">baz</div> <div class="message person-2">abc</div> <div class="message person-2">def</div> <div class="message person-1">ghi</div> </div>

这是否适合您，将取决于您希望它看起来如何的详细信息 - 您想要使用的特定边距，填充和边界半径。

如果您想要“更多”，那么您可能需要更改HTML结构。在同一个人的消息周围使用分组元素也不应该那么难 - 你只需要检查添加新消息的时间，发送消息的人是否与发送最后消息相同，并且取决于将消息附加到现有的最后一个分组元素，或者首先为另一个人创建一个新的分组元素。

Answer 3

我设法让它像这样工作......不确定这是否适合你的风格

.message{
  width: 100%;
  display: block;
  margin: 0;
  color: white;
  padding: 5px;
  margin:0;
}

.person-1, .person-1:first-of-type{
  background-color: green;
  text-align: left;
  display: block;
  float: left;
  width: 60%;
  margin: 0 5px;

}

.person-1 + .person-1,
.person-2 + .person-2{
  margin: 0 5px;
}

.person-1 + .person-2,
.person-2 + .person-1{
  margin: 5px 5px 0 5px;
}

.person-2, .person-2:first-of-type{
  background-color: blue;
  text-align:right;
  display:block;
  float:right;
  margin: 0 5px;
    width: 60%;
 }

<div id="messages">
    <div class="message person-1">hi</div>
    <div class="message person-1">how ru</div>
    <div class="message person-2">hi</div>
    <div class="message person-2">well, you?</div>
    <div class="message person-2">long time no see</div>
    <div class="message person-1">I know</div>
  <div class="message person-1">hi</div>
    <div class="message person-1">how ru</div>
    <div class="message person-2">hi</div>
  <div class="message person-1">hi</div>
    <div class="message person-1">how ru</div>
    <div class="message person-2">hi</div>
    <div class="message person-2">well, you?</div>
    <div class="message person-2">long time no see</div>
    <div class="message person-1">I know</div>
  <div class="message person-1">hi</div>
    <div class="message person-1">how ru</div>
    <div class="message person-2">hi</div>
    <div class="message person-2">well, you?</div>
    <div class="message person-2">long time no see</div>
  <div class="message person-2">hi</div>
    <div class="message person-2">well, you?</div>
    <div class="message person-2">long time no see</div>
    <div class="message person-1">I know</div>  
  <div class="message person-2">well, you?</div>
    <div class="message person-2">long time no see</div>
    <div class="message person-1">I know</div>
    
</div>

Answer 4

您是如何动态创建HTML的？使用JS我会建议跟踪谁发送了最后一条消息。然后，如果下一条消息来自与最后一条消息相同的源（同一个人发送它），则可以对其进行分组。那样而不是

<div id="messages">
    <div class="message person-1">
        <div id="msg1"...
        <div id="ms2"...
    </div>
    <div class="message person-2">
        <div id="msg3"...
        <div id="ms4"...
    </div>
    <div class="message person-1">
        <div id="msg5"...
    ...
</div>

您对Frameworks的看法如何？ Angular's ng-repeat对此有好处。

连续定型CSS

4 个答案:

完整示例