无论浏览器窗口多么狭窄，如何使这两个跨度保持在同一行？

Question

无论浏览器窗口有多窄，我都需要两个跨度（在示例中，复选框和标题内容）始终保持水平排列。我还需要checkboxyes跨度垂直浮动，以便始终将其与标题内容跨度的当前高度居中。

我尝试将div和div都浮动，这通常适用于“保持一致”要求，但我似乎无法使checkboxyes跨度垂直浮动并保持在标题内容跨度的中心。

这是最基本的初始要求。我尝试了各种浮动，显示：内联块等组合，但是没有运气。

#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 on MDN
• CSS Trick的Complete Guide to Flexbox。

Answer 2

我建议使用flexbox。

#container {
     display: flex;
}

Answer 3

您可以使用弹性框。它非常容易实现，并且可以满足您的所有要求。正如您在问题中提到的那样，它也具有响应能力，这对您来说是一项重要要求。

https://jsfiddle.net/snehansh/6huvtxz2/7/

将display: flex分配给<div id="container">，使用它可以为其子项分别指定checkboxyes和headlinecontents的对齐方式。请注意，默认情况下，flex-box会水平对齐内容，因此您无需为子级指定对齐方式。

  #container {
     width: 100%;
     display: flex;
  }

您希望跨度checkboxyes的内容垂直居中对齐。

再次为此，您将display: flex分配给元素checkboxyes，并使用align-items: center;垂直对齐其子元素。

  #checkboxyes {
     margin-right: 15px;
     display: flex;
     align-items: center;
  }

了解有关flex-box的更多信息。您可以参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/