我想在另一个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>
试着像这样改变css中的属性,
.next-week {
width: 100%;
height: auto;
position: relative;
display: flow-root; // Changed the display style
background: green;
}
你正在使用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>
Flex容器中忽略浮点数。所以,如果你摆脱了flex,然后用伪元素清除它,你会在右边得到它:-)
.next-week {
width: 100%;
height: auto;
position: relative;
/* display: flex; */
background: green;
}
.next-week:after {
content:"";
display:block;
clear:both;
}
正如评论中所提到的,您只需要使用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>