Question

我正在尝试创建一个与页面一样宽的div，并且在其中有两个div，一个左对齐，一个右对齐。它的结果比我想象的要困难得多。使用下面的代码，两个div左对齐。我做了一个jsFidle来证明这个问题。谢谢你的阅读。

<style>

#container{
            border:1px solid;
}

#left{
       text-align:left;
       border:1px solid red;
       display:table-cell;
}

#right{
       text-align:right;
       border:1px solid blue;
       display:table-cell;
}

</style>

<body>

  <div id = "container">
    <div id = "left">far left</div>
    <div id = "right">far right</div>
  </div>   

</body>

Answer 1

对于这样的事情，一般不需要使用浮动元素或绝对定位这是一种应该停止使用表格进行一般布局的方法。

Sample Jsfiddle

CSS：

#container {
    display: table;
    width: 100%;
}

#container > div {
    display: table-cell;
}

.right {
    text-align: right;
}

HTML：

<div id="container">
    <div>
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right</p>
    </div>
</div>

Answer 2

您需要使用

float: left

和

float: right

在div上

。

更好的对齐方式是使用

display:flex

在容器上，但你必须检查浏览器兼容性，我担心。

将嵌套div的左右对齐放在容器内

2 个答案: