Question

您好，我只是想知道为什么我的css float:right;没有用？

我已从codepen.io

创建了 DEMO

在此演示中，您可以看到有一个红色div（.hm）。这个div应该是右角，但它是向左浮动的。在这方面有什么问题可以帮助我？

CSS

.header {
  position:fixed;
  width:100%;
  padding:20px 0px;
  box-sizing:border-box;
  border-bottom: 1px solid #dbdbdb;
  background-color:#ffffff; 
}
.header_in {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.smatLogo {
  position:relative;
  float:left;   
  width:40px;
  height:40px;
   background-color:blue;
}
.smatLogo img {
  width:100%;   
}

.hm {
  float:right;
  position:relative;
  height:40px;
  width:100%;
  max-width:200px;
   background-color:red;
}

.mn {
  float:left;
  width:calc(100%/3 - 1px);
  width: -webkit-calc(100%/3 - 1px);
  width: -mox-calc(100%/3 - 1px);
  height:40px;  
}

.notif {
  width:100%;
  height:40px;
}

.exp{
  width:100%;
  height:40px;  
}

.user{
  width:100%;
  height:40px;
}

Answer 1

因为为display:flex;类设置了.header_in属性。这就是flex对象的正确行为。

现在您的选择仍然是不使用flex属性，或者如果您需要flexbox的属性，那么您可以使用下面给出的解决方案。

要解决此问题，您必须使用margin-left: auto;类.hm。

<强> DEMO

注意：也可以使用tables完成此操作，但稍后同一行table会回来咬你：D

正确浮动不起作用

1 个答案: