右邊的浮動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>