Question

在以下HTML中，.left具有float：right，无法更改。是否仍然可以将.right div移动到右侧而不更改浮动：右边的.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

您可以在离开div之前放置正确的div。

<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 2

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

Answer 3

试试这个

将其添加到Css代码：

    .wrap{

float：left;
}

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 4

就这样做

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 5

只需定义：

.left {float：left！important; }

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

我认为您无法更改HTML，因此这是一种适用于将自定义CSS应用于现有网站的情况的解决方案。

将div浮动到右边

5 个答案: