Question

我有2个DIV，绿色和红色。绿色必须出现在Red的左侧，Red必须一直坐在右边。我尝试将float直接应用于这两个div，结果是绿色一直向右，Red出现在Red的左侧。

任何想法？这是LIVE CODE

演示

.three {
  width: 100%;
  border: solid 1px blue;
  float: left;
  height: 45px
}
.red {
  width: 50%;
  background-color: red;
  height: 40px;
  float: right;
}
.green {
  width: 30%;
  background-color: green;
  height: 40px;
  float: right;
}

<body>
  <div class="three">
    <div class="green"></div>
    <div class="red"></div>
  </div>
</body>

Answer 1

只需移除所有floats，然后将inline-block的显示属性值应用到.green和.red,，这样元素将保持并排保留其位置。您不需要交换元素。看到它有效！

注意：您必须将text-align: right添加到父元素，即.three

.three {
  width: 100%;
  border: solid 1px blue;
  float: right;
  height: 45px;
  text-align: right;
}
.red {
  width: 50%;
  background-color: red;
  height: 40px;
   margin-right: 0!important;

}
.green {
  width: 30%;
  background-color: green;
  height: 40px;
 
}

.green, .red {
  display: inline-block;
  position: relative;
 

}

<body>
  <div class="three">
    
    <div class="green"></div>
    <div class="red"></div>

  </div>
</body>

注意：您必须将text-align: right添加到父元素，即.three

Answer 2

更改HTML标记中的顺序，因此红色首先对齐，然后绿色与绿色占据的宽度对齐。

＆＃13;

.three {
  width: 100%;
  border: solid 1px blue;
  float: left;
  height: 45px
}
.red {
  width: 50%;
  background-color: red;
  height: 40px;
  float: right;
}
.green {
  width: 30%;
  background-color: green;
  height: 40px;
  float: right;
}

＆＃13;

<body>
  <div class="three">
    <div class="red"></div>
    <div class="green"></div>

  </div>
</body>

＆＃13;

Answer 3

使用负边距

您可以使用负边距来获取所需的展示位置，而无需更改HTML元素的顺序。

首先，向.green元素添加一个等于.red元素宽度的右边距。

其次，在.red元素中添加一个右边距，其中包含.green和.red元素总宽度的负值。

.green上的右边距为.red元素提供了一个空格，.red上的负右边距将其拉回.green元素。

＆＃13;

.three {
  width: 100%;
  border: solid 1px blue;
  float: left;
  height: 45px
}
.red {
  width: 60%;
  background-color: red;
  height: 40px;
  float: right;
  margin-right: -80%; /* - (width of red + width of green) */
}
.green {
  width: 20%;
  background-color: green;
  height: 40px;
  float: right;
  margin-right: 60%; /* width of red */
}

＆＃13;

<div class="three">
  <div class="green"></div>
  <div class="red"></div>
</div>

＆＃13;

Answer 4

有一些简单的代码可以更好地理解它：

<div class="abc">
    <div class="red">
        <ul>
            <li>abc </li>
            <li>def</li>
        </ul>
    </div>
    <div class="button-wrapper">
        <button class="drop">
            ABC</button>
    </div>
</div>

Css样式是使用右浮点数添加2个div：

.red {
    background-color: red;
    float:left;}

.abc {
    float: right;
}

.red ul {
    list-style: none;
}

.red ul li {
    display: inline-block;
    padding-right: 40px;
}

.button-wrapper {
    background-color: blue;
    float: right;

}

.red::after {
    clear: both;
    content: "";

}

2 Divs Float Right - 不正确的顺序

4 个答案: