CSS 两个相邻的 div（无换行符）

Question

我想将 2 个<div>s 并排放置。我怎样才能做到这一点？ 两者都应该是 50% 的宽度。有人可以帮助纠正我的代码吗？

这是代码：

    <hr class="hr--small">
    <div class="grid">

    <div class="grid__item text-left">
      <p class="site-footer__links">{{ 'layout.footer.copyright' | t }} &copy; 
      {{ 'now' | date: "%Y" }} {{ shop.name | link_to: '/' }} • All Rights Reserved
      </p>
    </div>

    <div class="grid__item text-right">
      <p class="site-footer__links">
        <a href="http://www.w3schools.com/html/">Privacy Policy</a> •                               
        <a href="http://www.w3schools.com/html/">Terms & Conditions</a>
      </p>
    </div>

目前它们左右显示正确，但带有换行符。只是希望它们出现在同一行。

Answer 1

我不确定您使用的是什么网格框架，但我确信 text-left 和 text-right 是提供 text-align 属性的辅助类。

解决您的问题的方法是让 div 浮动，就像我在这个 Jsfiddle 中演示的那样：https://jsfiddle.net/hptv52gv/。

Answer 2

您可以浮动两个 div 元素并清除容器，使用 inline-block 和 box-sizing 来适应容器的真实宽度：

.grid {
  width: 100%;
  clear: both;
}

.grid__item {
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding: 0px 15px;
  display: inline-block;
}

.text-right {
  text-align: right;  
}

Fiddle Here

Answer 3

默认情况下，div 是块元素。这意味着，除其他外，它们每次都会掉到一个新的行。您可以使用一些 css 技术让 div 保持在同一行（float: left、display: inline、display: flex），但我最喜欢的是display: inline-block有时 html 文件中的空格（空格或换行符）会导致元素换行到新行的错误。您可以通过像这样删除空格来解决这个问题：

    <div class="grid__item text-left">
      <p class="site-footer__links">{{ 'layout.footer.copyright' | t }} &copy; 
      {{ 'now' | date: "%Y" }} {{ shop.name | link_to: '/' }} • All Rights Reserved
      </p>
    </div><div class="grid__item text-right">
      <p class="site-footer__links">
        <a href="http://www.w3schools.com/html/">Privacy Policy</a> •                               
        <a href="http://www.w3schools.com/html/">Terms & Conditions</a>
      </p>
    </div>

然后在你的 css 中，你会有这样的东西：

.grid__item{
    display: inline-block;
    width: 50%;
}

Answer 4

您可以使用table 元素来控制此布局。 See example.