html - CSS 将 div 1 居中对齐，将 div 2 右对齐

Question

请看看http://jsfiddle.net/zygnz/1/

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>

我们可以将左侧块对齐到页面中心并在剩余位置对齐右侧..？

Answer 1

如果您打算将 div 1 集中到剩余空间（容器 - div2），您可以使用 text-align:center 设置容器样式并将 div 2 向右浮动。

否则我会使用绝对位置。

Answer 2

我为你创造了一个小提琴。如果您为 div 使用固定宽度，它将起作用。如果不只是用一些 javascript 重写 CSS。

CSS：

.container
{
display:block;
width:400px;
height:250px;
background-color:black; /* not necessary */
}

.center
{
width:100px;
height:240px;
background-color:white; /* not necessary */
float:left;
margin-left:150px; /*(width_of_container/2)-(width_of_center/2)*/
}

.right
{
width:100px;
height:240px;
background-color:white; /* not necessary */
float:right;
}