Question

我想在右边漂浮两个div。最右边的div有可变文本，所以我希望左边的div继续向左移动但是坚持使用可变数据的右边div。我什么时候浮动：右边两个div替换正确的div。

<div class="wrap">
<div class ="left">static data<div>
<div class ="right">variable data<div>
<div class="wrap">

css 
 .left{
   float:right;
   width:69%;
   display:block;
  }
 .right{
  float:right;
  width:28%;
  display:block;
 }
 .wrap{
 width:100%;
 }

右边和左边的div还有一些div，但没有任何类。我该如何处理这个问题。当div显示时，左侧div接管右侧div。

谢谢，

Answer 1

我想你只想交换div。

第一个子div一直浮到rhs

第二个右浮动div显示在第一个

的左侧

<强> FIDDLE

<div class="wrap">
    <div class ="right">variable data</div>
    <div class ="left">static data</div>
</div>

CSS

 .left, .right{
    float:right;
 }

Answer 2

您可能希望触发称为块格式化上下文的内容。只需将合作伙伴的overflow属性设置为与默认值不同的值即可。如果您需要向后支持（即家庭），请使用zoom: 1;并将浮动div放在第一位。

.right {
    width: 28%;
    float: right;
}
.left {
    overflow: auto;
}
.wrap{
    width:100%;
}

<div class="wrap">
    <div class ="right">variable data</div>
    <div class ="left">static data</div>
</div>

http://jsfiddle.net/GMwjQ/

已经有一个帖子在SO中的某个地方发布了这个答案。无法找到它。

Answer 3

如果没有交换HTML中的div，请将包装器div浮动到右侧并使子div成为内联块。

css 
 .wrap{
   float: right;
 }
 .left{
   width: 69%;
   display: inline-block;
  }
 .right{
  width: 28%;
  display: inline-block;
 }

将两个div重叠在一起

3 个答案: