在另一个div内浮动div

Question

我试图在另一个div内设float: right div，但它不起作用？我需要帮助，这是我的代码：

＆＃13;

＆＃13;

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  background: green;
}

.next-week .next-icon {
  width: auto;
  float: right;
  padding: 12px;
  color: #fff;
  border-radius: 3px;
  border: 1px solid #fff;
  position: relative;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
}

.sche-content .next-week .next-icon p {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}

＆＃13;

<div class="next-week">
  <div class="next-icon">
    <p>Next week</p>
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

http://jsbin.com/barenahiru/edit?html,css,output

Answer 1

您正在使用display: flex，因此请使用margin-left: auto;在子div中使其浮动

＆＃13;

＆＃13;

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  background: green;
}

.next-week .next-icon {
  width: auto;
  float: right;
  padding: 12px;
  color: #fff;
  border-radius: 3px;
  border: 1px solid #fff;
  position: relative;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
  margin-left: auto;
}

.sche-content .next-week .next-icon p {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}

＆＃13;

<div class="next-week">
  <div class="next-icon">
    <p>Next week</p>
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flex容器中会忽略浮点数。 所以，如果你摆脱了flex，然后用伪元素清除它，你就会在右边得到它： - ）

 .next-week {
   width: 100%;
   height: auto;
   position: relative;
   /* display: flex; */
   background: green;
 }
.next-week:after {
 content:"";
 display:block;
 clear:both;
}

Answer 3

试着像这样改变css中的属性，

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flow-root; // Changed the display style
  background: green;
}

Answer 4

正如评论中所提到的，您只需要使用justify-content的flex属性来水平对齐元素。在这种情况下，它将使flex-end的值在最后对齐。

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content:flex-end;
  background: green;
}

.next-week .next-icon {
  width: auto;
  padding: 12px;
  color: #fff;
  border-radius: 3px;
  border: 1px solid #fff;
  position: relative;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
}

.sche-content .next-week .next-icon p {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}

<div class="next-week">
  <div class="next-icon">
    <p>Next week</p>
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>
</div>