强制两张牌在同一条线上

Question

我一直在网站上工作。 （调整输出大小以获得效果）

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

我尝试过的所有内容（this，this，this和this）并没有真正发挥作用。当我尝试执行display: inline-block时，它会强制将两个div放到左边。

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

Answer 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>