Question

我有以下代码： https://jsfiddle.net/105nfcze/55/

#footer-a {
  width: 50%;
  background: black;
  display: inline-block;
}

#footer-b {
  width: 50%;
  background: blue;
  display: inline-block;
  text-align: center;
}

<div class="content-wrapc">
  <p id="footer-a"> Footer </p>
  <p id="footer-b">
    <a href="#">test 1</a>
    <a href="#">test 12</a>
    <a href="#">test 13</a> </p>

</div>

我也点击了以下链接：Display two divs next to each other where each has a width of 50%

我也尝试过浮动，就像在此链接中所说的： How to place two divs next to each other?

但是我仍然没有将两个p的位置并排放置。我尝试了几项，并查看了一些质量检查。希望有人能提供建议并解释为什么会发生这种情况。

Answer 1

在父级上使用flex：

.content-wrapc {
  /* add this */
  display: flex;
}

#footer-a {
  width: 50%;
  background: black;
}

#footer-b {
  width: 50%;
  background: blue;
  text-align: center;
}

<div class="content-wrapc">
  <p id="footer-a"> Footer </p>
  <p id="footer-b">
    <a href="#">test 1</a>
    <a href="#">test 12</a>
    <a href="#">test 13</a>
  </p>
</div>

原始代码的问题是您使用了内联块-如果元素之间有任何空格（想想句子中的单词，如果元素之间有空格，则添加空格），这会添加一个空格为什么两个50％的元素不能并排放置

将两个p元素以50％的宽度彼此相邻放置

1 个答案: