простой HTML/CSS buble chat

Я хочу сделать простой buble чат с помощью css. с базовым css (а не CSS3), потому что чат работает в IE и загружается программой VB. Я использую поплавок влево и вправо, но у меня проблема с этим изображением простой HTML/CSS buble chat

пузырь слева и справа в строке. и то, что я хочу, как этот 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

use 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 buble chat

ответ

Смежные вопросы