Question

我有一个网页，其中有两列，我必须向左浮动，另一列向右浮动，在常规网页上正常工作。但是当我在手机上查看它时（我有移动jquery和css）所以这一切都适合屏幕的尺寸。由于两个列页面不适合，它将它放在下一行，然后看起来不对，因为右边的列然后在下一行右对齐。在不使用float css属性的情况下，左右对齐它的最佳方法是什么。我想我应该能够通过使用百分比设置边距或填充来做到这一点。有关最佳方法的任何想法吗？

Answer 1

这是一个jsbin（http://jsbin.com/funevi/2/edit?html,css,output），显示如何在不使用浮点数或弹性框的情况下在同一行上对齐两个项目。为了更好地使用内联块而不是浮点数，允许左右内容相对于彼此垂直对齐。

默认值是相对于彼此顶部对齐。但是将类vmiddle或vbottom添加到包含div.left-right元素将导致左侧内容框和右侧内容框彼此对齐。

box-sizing：border-box允许我们在浏览器中安全地使用逻辑数字，并且如果将边框或边距添加到左侧或右侧内容div中，则有助于防止内容环绕。

当使用内联块元素时，为了防止左右内容元素周围出现空白区域，容器指定字体大小为0.然后将字体大小设置为内容div的初始值。

最后，颜色设置在左右内容div上，只是为了使视觉上明显左右相对于彼此的垂直对齐方式，显然是不需要的。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    div.left-right {
      box-sizing: border-box;
      display: inline-block;
      font-size: 0;
      position: relative;
      white-space: nowrap;
      width: 100%;
    }

    div.left-right div.left,
    div.left-right div.right {
      box-sizing: border-box;      
      display: inline-block;
      font-size: initial;
      position: relative;
      white-space: normal;
      width: 50%;
      vertical-align: top;
    }

    div.left-right.vmiddle div.left,
    div.left-right.vmiddle div.right {
      vertical-align: middle;
    }

    div.left-right.vbottom div.left,
    div.left-right.vbottom div.right {
      vertical-align: bottom;
    }

    div.left-right div.left {
      background: firebrick;
      text-align: left;
    }

    div.left-right div.right {
      background: forestgreen;
      text-align: right;
    }
    </style>
  </head>

  <body>
    <div class="left-right">
      <div class="left">
        <p>Paragraph 1</p>
      </div>
      <div class="right">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>        
      </div>
    </div>
  </body>
</html>

左右对齐元素

1 个答案: