如何使用flexbox水平排列两个元素？

Question

我看过这个网站上的其他答案，但我找不到有效的解决方案。我的情况有点奇怪，我不应该更改html代码，我应该避免在可能的情况下使用类，我不能使用id。

所以html我看起来像这样

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  background: linear-gradient(to top right, #dddddd, #f7f8ff, #ffffff);
  background-attachment: fixed;
  font-family: "faricy-new-web", sans-serif;
  text-align: center;
}

div {
  background-color: #A9B6C7;
  margin: 5% 10% 5% 35%;
  padding: 2%;
  display: block;
}


/*TITLE BOX STYLE*/

.title div {
  display: flex;
}

.title .c4title {
  font-size: 200%;
  font-weight: bold;
  display: block;
}

.title p .c6 {
  display: flex;
  justify-content: space-around;
  padding: 5%;
  margin: 5%;
}

<div class="title">
  <p class="c4title">
    <a name="h.c2v2rn37qt4d"></a><span>Title</span></p>
  <div>
    <p class="c1"><span></span></p>
    <p class="c6"><span>Info: <pre>Result</pre></span></p>
    <p class="c6"><span>Date: <pre>Wed Jun 21 2017</pre></span></p>
    <p class="c1"><span></span></p>
  </div>
</div>

我希望它看起来像这样，但我似乎无法让它正确对齐。

所以我的问题是有没有办法在这些条件下做到这一点，还是我必须更改html？

编辑：好的，所以如果我从.title div中删除“display：flex”，那么浮动工作正常但有没有办法用flexboxes做同样的事情？

Answer 1

您可以在元素上使用float：left或float：right。 或者使用相对位置，并使用偏移量。 例如：左侧50 px

Answer 2

试试这个。

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  background: linear-gradient(to top right, #dddddd, #f7f8ff, #ffffff);
  background-attachment: fixed;
  font-family: "faricy-new-web", sans-serif;
  text-align: center;
}

div {
  background-color: #A9B6C7;
  margin: 5% 10% 5% 35%;
  padding: 2%;
  display: block;
}


/*TITLE BOX STYLE*/

.title div {
  
}

.title .c4title {
  font-size: 200%;
  font-weight: bold;
  display: block;
}

.c6 {
  float:left;  
  margin: 0;
}

pre{
margin:0;
text-align:left;
}

.c1{float:left;}

<div class="title">
  <p class="c4title">
    <a name="h.c2v2rn37qt4d"></a><span>Title</span></p>
  <div>
    <p class="c1"><span></span></p>
    <p class="c6"><span>Info: <pre>Result</pre></span></p>
    <p class="c6"><span>Date: <pre>Wed Jun 21 2017</pre></span></p>
    <p class="c1"><span></span></p>
  </div>
</div>