html - 向右浮动div

Question

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

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小提琴

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{

向左飘浮;
}

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

演示

Answer 5

简单定义：

.left { 浮动：左！重要；}

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

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

Answer 6

另一种方式：

如果您无法更改 html 结构，
则可以将一些 css 应用于 wrap 类，
因为它已经存在。

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

宽度 198px 是为了配合你的边框。
您可以将其更改为您想要的任何内容，以满足您的要求。

.wrap 类上的 float left 属性可以为您提供所需的内容。