右边的浮动div

Question

在下面的HTML中，.left有float：right，这是不能改变的。是否仍然有可能将.right div移动到右侧而不更改float：右侧的.left div？

HTML：

<div class="box"> 
    <div class="wrap"> 
     <div class="left">This should be left.</div> 
    </div> 
    <div class="right">This should be right</div>  
</div> 

CSS：

.box{ 
    width: 300px; 
    overflow: hidden; 
    border: 1px solid red;  
} 

.left{ 
    width: 100px; 
    float: right; /* cannot change */ 
    border: 1px solid blue;  
} 

.right{ 
    width: 100px; 
    float: right; 
    border: 1px solid green; 
} 

演示： http://jsfiddle.net/y5UEu/

Answer 1

只是这样做

HTML

<div class="box"> 
    <div class="wrap"> 
     <div class="left leftCol">This should be left.</div> 
    </div> 
    <div class="right">This should be right</div>  
</div> 

CSS

.box{ 
    width: 300px; 
    overflow: hidden; 
    border: 1px solid red;  
} 

.left{ 
    width: 100px; 
    float: right; 
    border: 1px solid blue;  
} 

.right{ 
    width: 100px; 
    float: right; 
    border: 1px solid green; 
} 
.leftCol { 
    float:left !important; 
} 

demo

Answer 2

你可以把你的右手股利左格之前。

<div class="box"> 
    <div class="wrap"> 
     <div class="right">This should be right</div> 
     <div class="left">This should be left.</div> 
    </div> 

</div> 

JS Fiddle

Answer 3

另一种方式：

如果你不能改变的HTML结构，
你可以申请一些CSS的包装类，
因为它已经存在。

.wrap { 
    width: 198px; 
    float: left; 
} 

宽度198px是警惕你的边界。
您可以将其更改为任何您想要的，以满足您的要求。

.wrap类的浮动left属性可以给你你想要的。

Answer 4

尝试用这种

一下添加到CSS代码：

.wrap{ 

浮动：左;
}

HTML：

<div class="box"> 
    <div class="right">This should be right</div> 
<div class="wrap"> 
    <div class="left">This should be left.</div> 
</div> 

Answer 5

简单的定义：

。左{浮动：左！重要; }

这将取代现有的.left {float:right;}

我认为你不能改变的HTML，所以这是在您应用自定义CSS到一个现有的网站的情况下有效的解决方案。

Answer 6

<div class="box"> 
    <div class="right">This should be right</div> 
    <div class="wrap"> 
    <div class="left">This should be left.</div> 
    </div> 
</div>