html - 我无法将我的 div 对齐到 和 的右侧；我似乎也无法控制推特嵌入的高度

Question

我无法让我的 twittercontainer 坐在 srun 和 mentor 的右边，我似乎无法改变 twittercontainer 的高度请帮助。我只需要了解如何在一列中获得基本上是两个 div 的简单布局，另一个 div 位于右侧。

我几乎尝试了所有我能想到的方法。

 <div class="newsbox">
      <div class="newboxcontent">
        <div class="srun">
        <img src="resources/sponsoredrun.jpg" align="left">

        <h1>Sponsored Run</h1>

        <h2>Six of our supporters ran 10k in Richmond on March 24th 2012 
            in order to raise money to help us continue our work. They 
            had 
            a great deal of fun and raised £1400! </h2>

      </div>

      <div class="mentor">
        <img src="resources/volunteermentors.jpg" align="left">
        <h1>Sponsored Run 2</h1>

        <h2>We are now accepting applications from those who would like 
            to take part in our next training course for volunteer 
           mentors which will take place in June 2012. Topics covered 
            will include: promoting choice and self awareness in young 
            people, reflective practice, confidentiality, anger and 
             aggression, substance misuse, the youth justice system,  
   </div>


    <div class="twittercontainer">

      <a class="twitter-timeline" href="https://twitter.com/BelongLondon?ref_src=twsrc%5Etfw">Tweets by BelongLondon</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

    </div>

    .newsbox {
      display: flex;
      flex-flow: column;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    .newboxcontent {

      flex-flow: column;
      display: flex;

    }

    .srun {
      padding right: 50px;
      padding bottom: 50px;
    }

    .srun h2 {
      font-size: 15px;
    }

    .srun img {
      padding: 20px;
    }

    .mentor h2 {
      font-size: 15px;
    }

    .mentor img {
      padding: 20px;
    }

    .mentor {
      padding-right: 50px;
      padding top: 100px;
    }


    .twittercontainer{
      width: 200px;
      height: 100px;

    }

    I just want the <twittercontainer> (twitter feed) to sit on the 
    right of the two other divs and stretch to the same height.

Answer 1

从最外层的 div .newsbox 中移除 flex direction column，您也不希望该包装器允许其子项包装。正如一些评论中提到的，您缺少一些 HTML 关闭选项卡，这通常会引入一些意想不到的结果。

    .newsbox {
      display: flex;
    }

    .newboxcontent {
      flex-flow: column;
      display: flex;

    }

    .srun {
      padding right: 50px;
      padding bottom: 50px;
    }

    .srun h2 {
      font-size: 15px;
    }

    .srun img {
      padding: 20px;
    }

    .mentor h2 {
      font-size: 15px;
    }

    .mentor img {
      padding: 20px;
    }

    .mentor {
      padding-right: 50px;
      padding top: 100px;
    }


    .twittercontainer{
      width: 200px;
      height: 100px;

    }

 <div class="newsbox">
  <div class="newboxcontent">
    <div class="srun">
    <img src="resources/sponsoredrun.jpg" align="left">
      <h1>Sponsored Run</h1>
      <h2>Six of our supporters ran 10k in Richmond on March 24th 2012 in order to raise money to help us continue our work. They had a great deal of fun and raised £1400!</h2>
    </div>
    <div class="mentor">
      <img src="resources/volunteermentors.jpg" align="left">
      <h1>Sponsored Run 2</h1>
      <h2>We are now accepting applications from those who would like to take part in our next training course for volunteer mentors which will take place in June 2012. Topics covered will include: promoting choice and self awareness in young people, reflective practice, confidentiality, anger and aggression, substance misuse, the youth justice system</h2> 
    </div>
  </div>

  <div class="twittercontainer">
    <a class="twitter-timeline" href="https://twitter.com/BelongLondon?ref_src=twsrc%5Etfw">Tweets by BelongLondon</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</div>