html - 将两个 div 浮动到彼此相邻的位置

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。

谢谢，

Answer 1

我想你只是想交换div。

第一个子 div 一直浮动到 rhs

第二个右浮动 div 显示在第一个的左侧

小提琴

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