Я не могу выровнять мой <twittercontainer>div справа от <srun>и <mentor>; Я также не могу контролировать высоту встраивания твиттера

Question

Я не могу заставить свой твиттерконтейнер сидеть справа от Срун и наставника, и я не могу изменить высоту твиттерконтейнера, пожалуйста, помогите. Мне просто нужно понять, как получить эту простую компоновку по существу двух 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

Удалите направление flex * column из самого внешнего div .newsbox, вы также не хотите, чтобы эта оболочка позволяла оборачивать его дочерние элементы. Как упоминалось в некоторых комментариях, вам не хватало нескольких закрывающих вкладок 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>