html - 简单的 HTML/CSS 气泡聊天

Question

我想使用 CSS 进行简单的聊天。使用基本的 css(不是 CSS3)，因为聊天在 IE 上运行并由 VB 程序加载。我使用左右浮动，但我遇到了像这张照片这样的问题

连续向左和向右冒泡。我想要的就像这张照片

这是我的示例代码

<div style="width:600px;">
	<div style="width:100%;">
		<span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius</span>
	</div>
	<div style="width:100%;">
		<span style="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span>
	</div>
	<div style="width:100%;">
		<span style="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span>
	</div>
	<div style="width:100%;">
		<span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span>
	</div>
	<div style="width:100%;">
		<span style="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The </span>
	</div>
	<div style="width:100%;">
		<span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius elements.</span>
	</div>
</div>

Answer 1

用 clearfix 试试这段代码:

<div style="width:600px;">
  <div style="width:100%;">
    <span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius</span>
    <div style="clear: both"></div>
  </div>
  <div style="width:100%;">
    <span style="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span>
    <div style="clear: both"></div>
  </div>
  <div style="width:100%;">
    <span style="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span>
    <div style="clear: both"></div>
  </div>
  <div style="width:100%;">
    <span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius property allows you to add rounded corners to elements.</span>
    <div style="clear: both"></div>
  </div>
  <div style="width:100%;">
    <span style="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The </span>
    <div style="clear: both"></div>
  </div>
  <div style="width:100%;">
    <span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius elements.</span>
    <div style="clear: both"></div>
  </div>
</div>