Question

我需要放置三列，我正在使用flex，但是我需要避免将一个div放置在另一个div上。

怎么办？

在我的尝试中，第三个div高于第二个div。

这是我的尝试：

<div style="display:flex; flex-flow: row nowrap;" ng-repeat="hour in Hours">
  <div style="width:10%">
    <span><i class="fa fa-clock" aria-hidden="true"></i> {{Hours.movieSession}}</span>
  </div>
  <div style="width:10%">
    <img src="img/3d_i.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 1">
    <img src="img/i2.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 0">
    <img src="img/3d.svg" ng-if="Hour['3D'] == 1 && Hour.IMAX == 0">
  </div>
  <div style="width:10%">
    <a href="{{Hour.SiteHref}}" target="_blank">
      <i class="fa fa-dollar-sign"></i> Buy
    </a>
  </div>
</div>

Answer 1

使用flex时，您可能希望使用flex-basis而不是width。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

https://gedd.ski/post/the-difference-between-width-and-flex-basis/

What are the differences between flex-basis and width?

<div style="display:flex; flex-flow: row nowrap;" ng-repeat="hour in Hours">
  <div style="flex-basis:10%">
    <span><i class="fa fa-clock" aria-hidden="true"></i> {{Hours.movieSession}}</span>
  </div>
  <div style="flex-basis:10%">
    <img src="img/3d_i.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 1">
    <img src="img/i2.svg" ng-if="Hour.IMAX == 1 && Hour['3D'] == 0">
    <img src="img/3d.svg" ng-if="Hour['3D'] == 1 && Hour.IMAX == 0">
  </div>
  <div style="flex-basis:10%">
    <a href="{{Hour.SiteHref}}" target="_blank">
      <i class="fa fa-dollar-sign"></i> Buy
    </a>
  </div>
</div>

CSS避免使用Flex放置在另一个之上

1 个答案: