Вывод сообщений в шахматном порядке

143

15 августа 2018, 16:10

Нужно сделать примерно такую форму записи:

┌───────────────────────┐
│┌────┐                 │
||Left|                 │
│└────┘          ┌─────┐|
│                │Right│|
|┌────┐          └─────┘│
│|Left|                 |
|└────┘          ┌─────┐|
│                │Right│|
|┌────┐          └─────┘│
||Left|                 |
│└────┘          ┌─────┐|
│                │Right│|
|                └─────┘│
└───────────────────────┘

Использую следующий код:

.msg-block { 
    display: grid; 
    position: absolute; 
    bottom: 40; 
    left: 0; 
    right: 0; 
    font: 1.4em Arial sans-serif; 
    padding-left: 10px; 
    padding-right: 10px; 
    grid-template-columns: 50% 50%; 
} 
 
.item-left { 
    grid-column-start: 1; 
    justify-self: start; 
} 
 
.item-right { 
    grid-column-start: 2; 
    justify-self: end; 
}

<div class="msg-block"> 
            <div class="item-right">Right</div> 
            <div class="item-left">Left</div> 
            <div class="item-right">Right</div> 
            <div class="item-left">Left</div> 
            <div class="item-right">Right</div> 
            <div class="item-left">Left</div> 
</div>

Однако это работает не так, как нужно.

Answer 1

.msg-block { 
  padding: 5px; 
  border: 1px solid black; 
} 
 
.msg-block .item {} 
 
.msg-block .item span { 
  border: 1px solid blue; 
  background: lightblue; 
} 
 
.msg-block .item:nth-child(even) {} 
 
.msg-block .item:nth-child(odd) { 
  text-align: right; 
}

<div class="msg-block"> 
  <div class="item"><span>Right</span></div> 
  <div class="item"><span>Left</span></div> 
  <div class="item"><span>Right</span></div> 
  <div class="item"><span>Left</span></div> 
  <div class="item"><span>Right</span></div> 
  <div class="item"><span>Left</span></div> 
</div>

Answer 2

.msg-block { 
  overflow: hidden; 
  border: 1px solid blue; 
 
  max-width: 10em; 
  margin: auto; 
} 
 
.item-left, .item-right { 
  clear: both; 
 
  background: silver; 
  border-radius: 1em; 
  padding: .25em .5em; 
} 
 
.item-left { 
  float: left; 
} 
 
.item-right { 
  float: right; 
}

<div class="msg-block"> 
  <div class="item-right">Right</div> 
  <div class="item-left">Left</div> 
  <div class="item-right">Right</div> 
  <div class="item-left">Left</div> 
  <div class="item-right">Right</div> 
  <div class="item-left">Left</div> 
</div>