0

我有以下代码:

<div style="background-color:Aqua">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>

我想显示...

left                                                                        right

...具有浅绿色背景,但块不填充颜色。

我究竟做错了什么?

4

3 回答 3

0

浮动 - 定位规则取决于某些东西,所以没有那个东西你永远不会对齐对象。因此,您应该使用以下顺序:

<div style="background-color:Aqua">
  <div style="float:right;max-width:50%;">Right</div><!-- 100% by default -->
  <div>Left</div>
  <div style="clear:right;"></div><!-- closing the floating -->
</div>

否则:

<div style="background-color:Aqua">
  <div style="float:left;max-width:50%;">Left</div>
  <div>Right</div>
  <div style="clear:left;"></div>
</div>

或两者:

<div style="background-color:Aqua">
  <div style="float:left;max-width:30%;">Left</div>
  <div style="float:right;max-width:30%;">Right</div>
  <div>Center</div>
  <div style="clear:both;"></div>
</div>
于 2012-11-27T00:47:45.423 回答
0

我是否可以建议使用强大的 clearfix,尤其是这个:http ://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

添加这个CSS:

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

然后给你的容器,父母aqua div aclass="clearfix"

这是一个小提琴演示

于 2012-11-27T00:49:23.320 回答
0

清除你的浮动,例如overflow: hidden

<div style="background-color:Aqua; overflow: hidden">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>
于 2012-11-27T00:40:56.020 回答