CSS使div符合聊天布局

Question

我想为语言培训目的硬编码聊天会话。我几乎在那里，但我的信息并不适合他们的父母div。具体而言，父div的高度不会调整以适应文本。

.my_left_div,
.my_right_div {
  margin: 10 0 10 0;
  width: 100%;
}

.my_left_div {
  border: 1px solid red;
}

.my_right_div {
  border: 1px solid green;
}

.my_left_p {
  max-width: 200px;
  border: 1px solid black;
}

.my_right_p {
  max-width: 200px;
  border: 1px solid black;
  position: absolute;
  right: 26px;
}

<div>
  <div class="my_left_div">
    <p class="my_left_p">left is the colour of my true love's hair</p>
  </div>
  <div class="my_right_div">
    <p class="my_right_p">right is the colour</p>
  </div>
  <div class="my_left_div">
    <p class="my_left_p">left is the colour of my true love's hair</p>
  </div>
</div>

这是我在WordPress中得到的：

我想有可能有一些WordPress主题CSS与我的'自定义'CSS冲突。

Answer 1

.my_right_div {
  height: 72px;
  border:1px solid green;
}

更改后，您的文档将显示为

Answer 2

https://jsfiddle.net/j2fLfy9y/8/

为了使其响应，我更喜欢你使用位置relative

.my_left_div, .my_right_div {
  margin:10 0 10 0;
  width:100%;
}

.my_left_div {
    border: 1px solid red;
    position: relative;
    float: left;
}

.my_right_div {
    border: 1px solid green;
    position: relative;
    float: right;
    left: 2px;
}

.my_left_p {
    max-width: 400px;
    margin-left: 3%;
}

.my_right_p {
    margin-right: 3%;
    float: right;
    max-width: 400px;
}

<div>
  <div class="my_left_div">
    <p class="my_left_p">left is the colour of my true love's hair</p>
  </div>
  <div class="my_right_div">
    <p class="my_right_p">right is the colour... hairleft is the colour of my true love's hairhairleft is the colour of my true love's hair</p>
  </div>
  <div class="my_left_div">
    <p class="my_left_p">left is the colour of my true love's hair..left is the colour of my true love's hairleft is the colour of my true love's hair</p>
  </div>
</div>