css - 默认居中对齐 DIV 并左对齐

Question

我的 DIV 标签左右浮动。默认情况下，右侧 DIV 是隐藏的。我想在隐藏右侧 DIV 时默认在中心显示第一个 DIV，并在右侧 DIV 可见时向左移动。您能推荐一下吗？

<div id="main">
    <div id="left1" style="width: 50%; float: left">
        <a href id="link">link</a>
    </div>
    <div id="right1" style="width: 50%; float: right; display:none"></div>
</div>

Answer 1

重新排列你的 html，如下所示:

    <div id="main">
        <div id="right1" >
        </div>
        <div id="left1">
          <a href id="link">link</a>
        </div>
    </div>

像这样设置CSS:

#main {
    text-align: center;
}

#left1 {
    display: inline-block;
    width: 50%;
    text-align: left; /* if you need it left */
}

#right1 {
    width: 50%;
    float: right;
}

See example fiddle.