2 div内联但是居中的h1，就像第二个div不在那里一样

Question

我有一个复杂的问题。我希望你理解我的问题。

有小提琴：http://jsfiddle.net/User1010/ZNGsh/110/

<div id="wrapper">
<div id="header">
<div id="header-e1">
    <h1>
    TITLE
    </h1>
</div>
<div id="header-e2">
<p>
       Line 1
    <br>
    Line 2
</p>

</div>

</div>

我真正想要的是H1 - 标题在nav div中居中。

但是第二个div（header-e2）需要在第一个div（header-e1）旁边浮动，如果宽度太低则向下移动。

这甚至可能吗？

Answer 1

你可以使用flexbox

来做到这一点

由于您的问题尚不清楚：

  

但是第二个div（header-e2）需要在第一个div旁边浮动   div（header-e1），如果宽度太低，则向下移动.-

我将举几个例子

1. H2浮动在H1旁边，但靠近页面的一边，而不是H1

＆＃13;
＆＃13;
body {
  margin: 0
}

#header {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width:100%;
  background: lightblue
}

#header-e1 {
  margin: auto
}

#header div {
  border: red solid
}
＆＃13;
<div id="header">
  <div id="header-e1">
    <h1>
      TITLE
    </h1>
  </div>
  <div id="header-e2">
    <p>
      Line 1
      <br> Line 2
    </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1. H2浮动在H1旁边，H1旁边

＆＃13;
＆＃13;
body {
  margin: 0
}

#header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
  background: lightblue
}


#header div {
  border: red solid
}
＆＃13;
<div id="header">
  <div id="header-e1">
    <h1>
      TITLE
    </h1>
  </div>
  <div id="header-e2">
    <p>
      Line 1
      <br> Line 2
    </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;