如何在中间将3个div彼此相邻？

Question

我有3个div彼此相邻，但是他们并不是很好。 他们倾向于顶部而不是中间。

我想要的：

现在是什么：

正如你所看到的，当前的一个并不是非常好。段落需要更高等等。这看起来似乎是一件微妙的事情，但是当你在不同尺寸的屏幕上打开它时，它看起来非常无组织和混乱。

那么基本上如何使它看起来像第一张图片？

有人有想法吗？

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 63px;
  font-size: 60px;
  font-weight: ligter;
}

.smalltext {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
}

.container {
  float: left;
  margin: 0 auto;
  width: 100%;
  display: flex;
}

.left {
  width: 25%;
  margin: 05% 00% 00% 02%;
}

.imageleft {
  float: left;
}

.paragraphs {
  margin: 5% 00% 2% 00%;
  width: 50%;
}

.imageright {
  float: right;
  margin: 02% -10% 0% 00%;
  width: 300px;
  height: 200px;
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="left">
    <div id="methods" class="square"><span class="Capital">M</span>
      <span class="smalltext">Methods</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>
<div class="container">
  <div class="left">
    <div id="motivation" class="square"><span class="Capital">M</span>
      <span class="smalltext">Motivation</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>

Answer 1

我会使用flexbox方法然后你可以垂直对齐容器的子代，代码中的注释：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center; /* this vertically aligns the contents */
    justify-content: space-between;
    margin-bottom: 20px;
}

.left {
    width: 25%;
}

.paragraphs {
    padding: 0 5%; /* space between cells */
    flex-grow: 1; /* takes rest of space, best not to use 50% in case 25% + 50% + 300px > 100% */
}

.imageright {
    width: 300px;
}

<div class="container">
    <div class="left">
        <div id="methods" class="square"><span class="Capital">M</span>
            <span class="smalltext">Methods</span></div>
    </div>
    <div class="paragraphs">

        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
        IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

    </div>
    <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>
<div class="container">
    <div class="left">
        <div id="motivation" class="square"><span class="Capital">M</span>
            <span class="smalltext">Motivation</span></div>
    </div>
    <div class="paragraphs">

        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
        IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

    </div>
    <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>