Question

我在Flex容器中有两个div，第二个在页面的右侧对齐，而不是在第一个的旁边。

由于flex-flow的默认值为row且justify-content的默认值为flex-start，我希望第二个div与第一个div对齐。

我在这里做错了什么？

我的滚动幻灯片是否会以某种方式干扰div与文本的位置？

＆＃13;

html {
  background-color: white;
}

body {
  width: 1300px;
  margin: 0 auto 0;
}

#container {
  width: 500px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}

.photobanner {
  height: 270px;
  width: 6748px;
  margin-bottom: 80px;
  font-size: 0px;
}

img {
  margin-right: 2px;
}

.flex-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
}

.mission {
  margin: 25px;
  width: 300px;
  height: auto;
}

.mission p {
  font-family: "europa", sans-serif;
  text-align: left;
  font-size: 18px;
  padding: 20px;
  line-height: 125%;
}

.first {
  -webkit-animation: bannermove 60s linear infinite;
  -moz-animation: bannermove 60s linear infinite;
  -ms-animation: bannermove 60s linear infinite;
  -o-animation: bannermove 60s linear infinite;
  animation: bannermove 60s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -6268px;
  }
}

img {
  margin-right: 2px;
}

＆＃13;

<section class="flex-container">
  <div id="container">
    <!-- Each image is 480px by 270px -->
    <div class="photobanner">
      <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
    </div>
  </div>
  <div class="mission">
    <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </p>
  </div>
</section>

＆＃13;

Answer 1

问题是您在第一个弹性项目上有正确的自动边距：

#container {
    width: 500px;
    overflow: hidden;
    margin: 50px auto; <-- problem here; flex auto margins
    background: white;
}

基于how auto margins work in a flex container，这会自动将其兄弟姐妹推到尽可能远的地方。试试这个：

#container {
    width: 500px;
    overflow: hidden;
    margin: 50px 0; <-- remove the horizontal auto margins
    background: white;
}

https://jsfiddle.net/z8jte8sb/

弹性项之间的神秘空间

1 个答案: