Question

我想在导航栏中显示两个div，问题是如果我将这个div <div _ngcontent-c9="" class=" ng-clock docs-homepage-row menuSup">设置为float：在css中，它将不会出现在屏幕的右侧

   <nav _ngcontent-c1="" class=" ng-clock docs-navbar-header menuDate">
     <div _ngcontent-c9="" class=" ng-clock docs-homepage-row menuSup">


       <div _ngcontent-c9="" class=" ng-clock docs-homepage-promo-img">
         ...
      </div>

      <div _ngcontent-c9="" class=" ng-clock docs-homepage-promo-img" >
         ...
      </div>

    </div>
  </nav>

CSS

.docs-navbar-header[_ngcontent-c1] {
display : flex;
flex-wrap : wrap;
align-items : center;
padding : 12px 16px;
}

.menuDate{
  width: 100%;
  background: var(--defaultColorDark);
}

.docs-homepage-row[_ngcontent-c9] {
display : flex;
max-width : 920px;
margin : 60px 0;
float: right;
}

.menuSup[_ngcontent-c9] {
display : flex;
width: 100%;
margin : 10px 10px;
float: right;
}

.docs-homepage-row[_ngcontent-c9] .docs-svg-image[_ngcontent-c9] {
max-width : 90%;
}

.docs-homepage-promo-desc[_ngcontent-c9], .docs-homepage-promo-img[_ngcontent-c9] {
width : 50%;
}
.docs-homepage-promo-img[_ngcontent-c9] {
text-align : center;
margin-top: 20px;

}

Answer 1

有许多选项可以实现您的需求，但使用float属性并不是最好的选择。根据具体情况，以下每个选项都很有趣。

[选项＃1] （推荐）

如果.docs-homepage-row.menuSup是.docs-navbar-header.menuDate中唯一的一个孩子，则只需将justify-content: flex-end;应用于.docs-navbar-header.menuDate。

了解有关Flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[选项＃2] （有用）

将margin-left: auto;应用于.docs-homepage-row.menuSup会将弹性项目推向右侧。

[选项＃3] （不推荐）

如果由于某种原因，您确实需要使用float，请注意您需要“清除”下一个元素。实现它的最好方法是在父级上使用clearfix hack。

您可以通过以下链接了解有关clearfix hack的更多信息：https://css-tricks.com/snippets/css/clear-fix/

导航和浮动问题

1 个答案: