在父母中彼此相邻

Question

我正在尝试为js post滑块创建一个基础。 我需要所有带有帖子摘录的div s在一行中，如果它们比它们的父容器宽（并且它们肯定是），我希望它们只是隐藏（所以我使用overflow:hidden在父容器上。）

要将它们设置在一行中我尝试在父母身上使用display: inline-block，float: left和white-space: nowrap，但不在那里，或者所有人都不在一起工作

＆＃13;

＆＃13;

.row {
  width: 90vw;
  margin: 0 auto;
  background: yellow;
}

.thoughts .thoughts-slider {
  overflow: auto;
  white-space: nowrap;
  width: 100%;
}

.thoughts .thoughts-slider .thoughts-slide {
  width: 30vw;
  background: #ebebeb;
  padding: 8%;
  float: left;
  margin-right: 2%;
  height: 550px;
  display: inline-block;
  white-space: normal;
}

＆＃13;

<section class="thoughts">
  <div class="container">
    <div class="row">
      <div class="thoughts-slider">
        <div class="thoughts-slide">
          <h3>Here’s some insight about how I set up my working space 1</h3>
          <h4>December 12th, 2016</h4>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
        </div>
        <div class="thoughts-slide">
          <h3>Here’s some insight about how I set up my working space 2</h3>
          <h4>December 12th, 2016</h4>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur.</p>
        </div>
        <div class="thoughts-slide">
          <h3>Here’s some insight about how I set up my working space 3</h3>
          <h4>December 12th, 2016</h4>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
        </div>
        <div class="thoughts-slide">
          <h3>Here’s some insight about how I set up my working space 4</h3>
          <h4>December 12th, 2016</h4>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;