强制两张卡在同一行答案

【问题标题】：Force two cards to be on the same line强制两张卡在同一行
【发布时间】：2017-12-05 21:44:15
【问题描述】：

我一直在做一个网站。（调整输出大小得到效果）

.header {
  text-align: center;
  color: #ffffff;
  font-family: Trebuchet MS;
}

body {
  background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;
}

.img {
  text-align: center;
  width: 50%;
  height: 50%;
}

a:link {
  text-decoration: none;
  color: #0645AD;
}

a:visited {
  text-decoration: none;
  color: #0645AD;
}

a:active {
  text-decoration: none;
  color: #0B0080;
}

a:hover {
  text-decoration: none;
  color: #0B0080;
}

.cardPlain {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  width: 70%;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  width=70%;
  margin: auto;
}

.control-width {
  width: 70%;
  margin: auto;
}

.card,
.control-width.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  margin: auto;
  width: 100%;
}

<h1>&nbsp</h1>
<div class="control-width">
  <a href="bio.html">
    <div class="card">
      <p>&nbsp</p>
      <p style="text-align: center;"><img src="rappaticFull.jpg" alt="I haven't uploaded the image :-)"></p>
      <div class="container" style="text-align:center">
        <h2 class="header">Hi, I'm rappatic.</h2>
        <p class="header">I code when I feel like it.</p>
        <p>&nbsp</p>
      </div>
    </div>
  </a>
</div>

<h1>&nbsp</h1>

<div class="cardPlain">
  <div class="container" style="text-align:center">
    <h3 class="header">My Stuff</h3>
    <p class="header"><a href="https://stackexchange.com/users/7808413/pagie" target="_blank">&nbspStack Exchange</a></p>
    <p class="header"><a href="downloads.html">Downloads</a></p>
    <p class="header"><a href="https://github.com/rappatic" target="_blank">Github</a></p>
    <p class="header"><a href="https://twitter.com/rappatic_" target="_blank">Twitter</a>&nbsp|&nbsp<a href="https://huggle.jdf2.org/hug/rappatic/" target="_blank">Huggles</a></p>
  </div>
</div>

<div class="cardPlain">
  <div class="container" style="text-align:center">
    <h3 class="header">Foo</h3>
    <p>bar</p>
    <p>Some content</p>

所以想法是强制下载 div 与占位符 (foo) 显示在同一行，如下所示：

我尝试过的所有方法（this、this、this 和 this）实际上都不起作用。当我尝试做 display: inline-block 的事情时，它只会迫使两个 div 向左移动。

如何使两个 div 出现在同一行？

【问题讨论】：

不确定这是否会产生差异，但您在 .container{...} 上有错字 - 当等号应该是冒号时，您有 width=70%;
我们可以看看您的inline-block 尝试吗？请记住，如果它们都设置为width:70% (70+70>100)，它们将不适合一行。另请注意，两个元素之间的空白将被显示并增加宽度，因此如果两个宽度加起来正好为 100%，则需要消除它们之间的空白。
另外，.cardPlain 的宽度是屏幕的 70%……这基本上意味着其中两个不能并排放置在一个屏幕中
如果我们不解决特定的编码问题，这个概念肯定已经在别处讨论过（How to place div side by side 的可能副本）。
How to place div side by side的可能重复

标签： html css

【解决方案1】：

将您的 cardPlain div 包装在类似这样的父 div 中，并使用 display: flex 设置父 div 的样式。这将使它们水平对齐，但您需要调整每个容器的高度以匹配高度。

FLEX 了解更多关于 flexbox 技巧的信息。

<div style="display: flex">
  <div class="cardPlain">
  </div>
  <div class="cardPlain">
  </div>
<div>

.header {
  text-align: center;
  color: #ffffff;
  font-family: Trebuchet MS;
}

body {
  background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;
}

.img {
  text-align: center;
  width: 50%;
  height: 50%;
}

a:link {
  text-decoration: none;
  color: #0645AD;
}

a:visited {
  text-decoration: none;
  color: #0645AD;
}

a:active {
  text-decoration: none;
  color: #0B0080;
}

a:hover {
  text-decoration: none;
  color: #0B0080;
}

.cardPlain {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  width: 70%;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  width=70%;
  margin: auto;
}

.control-width {
  width: 70%;
  margin: auto;
}

.card,
.control-width.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  margin: auto;
  width: 100%;
}

<h1>&nbsp</h1>
<div class="control-width">
  <a href="bio.html">
    <div class="card">
      <p>&nbsp</p>
      <p style="text-align: center;"><img src="rappaticFull.jpg" alt="I haven't uploaded the image :-)"></p>
      <div class="container" style="text-align:center">
        <h2 class="header">Hi, I'm rappatic.</h2>
        <p class="header">I code when I feel like it.</p>
        <p>&nbsp</p>
      </div>
    </div>
  </a>
</div>

<h1>&nbsp</h1>

<div style="display: flex;">
  <div class="cardPlain">
    <div class="container" style="text-align:center">
      <h3 class="header">My Stuff</h3>
      <p class="header"><a href="https://stackexchange.com/users/7808413/pagie" target="_blank">&nbspStack Exchange</a></p>
      <p class="header"><a href="downloads.html">Downloads</a></p>
      <p class="header"><a href="https://github.com/rappatic" target="_blank">Github</a></p>
      <p class="header"><a href="https://twitter.com/rappatic_" target="_blank">Twitter</a>&nbsp|&nbsp<a href="https://huggle.jdf2.org/hug/rappatic/" target="_blank">Huggles</a></p>
    </div>
  </div>

  <div class="cardPlain">
    <div class="container" style="text-align:center">
      <h3 class="header">Foo</h3>
      <p>bar</p>
      <p>Some content</p>
    </div>
  </div>
</div>

【讨论】：