html - 无论浏览器窗口有多窄，我怎样才能让这两个跨度保持在同一条线上？

Question

我需要两个 span(在示例中为 checkboxyes 和 headlinecontents)以始终彼此水平对齐，无论浏览器窗口变得多窄。我还需要 checkboxyes 跨度垂直 float ，以便它始终以 headlinecontents 跨度的当前高度为中心。

我已经尝试将两者都作为 div float ，这通常适用于“保持一致”的要求，但我似乎无法让复选框垂直 float 并保持在标题内容范围的中心。

这是最初的非常基本的要求。我尝试了各种 float 、显示:内联 block 等组合，但没有成功。

#container {
  width: 100%;
}

#checkboxyes {
  margin-right: 15px;
}

#checkbox {
  margin-right: 5px;
}

#yes {}

#headlinecontents {}

#headline {
  font-weight: bold;
}

#contents {}

<div id="container">
  <span id="checkboxyes">
          <span id="checkbox">checkbox</span>
  <span id="yes">YES</span>
  </span>
  <span id="headlinecontents">
          <div id="headline">Title of the article Title of the article </div>
          <div id="contents">Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article </div>
       </span>
</div>

Answer 1

#container {
  display: flex;
  align-items: center;
}
#checkboxyes {
  flex: 0;
  display: flex;
}
#headlinecontents {
  flex: 1;
}

看到它工作:

#container {
  width: 100%;
}

#checkboxyes {
  margin-right: 15px;
}

#checkbox {
  margin-right: 5px;
}

#headlinecontents {}

#headline {
  font-weight: bold;
}

#container {
  display: flex;
  align-items: center;
}

#checkboxyes {
  flex: 0;
  display: flex;
}

#headlinecontents {
  flex: 1;
}

<div id="container">
  <span id="checkboxyes">
      <span id="checkbox">checkbox</span>
  <span id="yes">YES</span>
  </span>
  <span id="headlinecontents">
      <div id="headline">Title of the article Title of the article </div>
      <div id="contents">Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article Body of the article </div>
   </span>
</div>

---

有用的资源:

• 官方flexbox documentation .
• > Basic concepts of flexbox在 MDN 上
• CSS 技巧 Complete Guide to Flexbox .