0

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

4

3 回答 3

0

为 body 设置最小宽度，以便两个 div 位于同一行。

body{
 min-width: 800px; //or whatever the size of the two divs is
}
于 2013-01-15T18:07:16.403 回答
0

您可能做得对，但您想删除移动设备上的浮动属性，如果您之前设置过宽度，则删除宽度以使其适合全屏，并应用边距（如有必要）。

@media screen and (max-width: 480px) {
    .floated-div {
        float: none;
        width: auto;
        margin: 0 1em;
    }
}

你可以在这里阅读更多：http: //css-tricks.com/css-media-queries/

于 2013-01-15T18:07:58.977 回答
0

这是一个 jsbin ( http://jsbin.com/funevi/2/edit?html,css,output ) 展示了如何在不使用浮动或弹性框的情况下对齐同一行上的两个项目。为了使事情变得更好，使用 inline-block 而不是浮动允许左右内容相对于彼此垂直对齐。

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

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

使用 inline-block 元素时，为了防止左右内容元素周围出现空白，容器将字体大小指定为 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>
于 2015-01-08T05:58:20.893 回答