在另一个div内浮动div

问题描述 投票:0回答:4

我想在另一个div内制作一个float: right 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;
}

.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

html css css-float
4个回答
0
投票

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

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

1
投票

你正在使用display: flex所以使用margin-left: auto;在儿童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>

0
投票

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

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

0
投票

正如评论中所提到的,您只需要使用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>
© www.soinside.com 2019 - 2024. All rights reserved.