简单的HTML/CSS布尔聊天

我想使用CSS简单的布尔聊天。与基本的CSS（不CSS3），因为聊天运行在IE和VB程序加载。我使用左右浮动，但我得到像这样的图案简单的HTML/CSS布尔聊天

气泡左右连续。并且我想是这样的PICT

这是我的示例代码

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

来源

2016-08-12 Dedi Ananto

它添加到CSS

div { clear:both; }

来源

2016-08-12 10:04:59

试试这个代码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>

来源

2016-08-12 09:58:15 ristapk

无需添加额外的div元素。只需将'clear：both;'放在周围的元素上（使用'width：100％'的那个元素） – user3528269

就可以了，它可以像这样并且使用更少的HTML，谢谢 – ristapk

尝试这一点，应该工作

div {clear: both;}

来源

2016-08-12 10:01:51

使用clear：无论使用任何标记 –

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

来源

2016-08-12 10:30:44

简单的HTML/CSS布尔聊天

回答

相关问题