简单的HTML / CSS buble聊天

Question

我希望使用css进行简单的buble聊天。使用基本的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：

尝试此代码

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个应该有效

def self.date_attributes
    self.columns_hash
        .keep_if{ |k, v| [:date, :datetime].include? v.type }
        .collect{ |k, v| k }
end

def self.sms_statuses
    {
        sms_limit_reached: I18n.t('sms.reservation.sms_limit_reached'),
        invalid_number: I18n.t('sms.reservation.invalid_number'),
        ok: I18n.t('sms.reservation.ok')
    }
end

Answer 3

将此添加到css

div { clear:both;  }

Answer 4

<div style="width:600px;">
	<div style="display: block; width: 100%; float: left;">
		<span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius</span>
	</div>
	<div style="display: block; width: 100%; float: right;">
		<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="display: block; width: 100%; float: right;">
		<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="display: block; width: 100%; float: left;">
		<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="display: block; width: 100%; float: right;">
		<span style="background:#ff4d4d;padding:10px;float:right;margin-top:5px;">The </span>
	</div>
	<div style="display: block; width: 100%; float: left;">
		<span style="background:#e5e5e5;padding:10px;float:left;margin-top:5px;">The border-radius elements.</span>
	</div>