我想使用 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>
最佳答案
用 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>
关于html - 简单的 HTML/CSS 气泡聊天,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38915094/