在另一个 div 中浮动 div

Question

我想在另一个 div 中创建一个 div float: right 但它不起作用？我需要帮助，这是我的代码：

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

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

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

Answer 1

浮动容器在弹性容器中被忽略。所以，如果你去掉flex，然后用伪元素清除它，你就会得到它在右边:-)

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

Answer 2

尝试像这样更改 css 中的属性，

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

Answer 3

正如评论中提到的，您只需要使用 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>

Answer 4

你正在使用 display: flex 所以使用 margin-left: auto; 使浮动在 child div

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

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

在另一个 div 中浮动 div

Float div inside another div

html

css

css-float