html - 将一个 div 一个接一个地放置

Question

我正在尝试一个div接一个地垂直放置，一些 div 放在右边，另一个放在左边，比如短信。

我有这样的东西，但它没有起到作用。

有任何想法吗？

container {
  margin-left: 5px;
}

right {
  float: right;
  width: 50%;
  margin-bottom: 5px;
}

left {
  float: left;
  width: 50%;
  margin-bottom: 5px;
}

<div class='container'>
  <div class='right'>
    "text to the right"
  </div>
  <div class='left'>
    "text to the left"
  </div>
  <div class='right'>
    "text to the right"
  </div>
</div>

标签： htmlcss

Answer 1

修正@j08691 提到的错字并添加clear: both到.rightand .left。

请参阅下面的片段：

container {
  margin-left: 5px;
}

.right {
  clear: both;
  float: right;
  width: 50%;
  margin-bottom: 5px;
}

.left {
  clear: both;
  float: left;
  width: 50%;
  margin-bottom: 5px;
}

<div class='container'>
  <div class='right'>
    "text to the right"
  </div>
  <div class='left'>
    "text to the left"
  </div>
  <div class='right'>
    "text to the right"
  </div>
</div>