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;
}

请参阅示例小提琴。

Answer 2

这是一个使用实际浮点数的 javascript 示例http://jsfiddle.net/tprats108/DNve9/

HTML

<div id="main">
  <div id="left1" class="element center">
    <a href="#" id="show">Show</a>
  </div>
  <div id="right1" class="element hidden">
    Text
  </div>
</div>

CSS

.left {
  float: left;
}
.right {
  float: right;
}
.center {
  text-align: center;
}

.element {
  width: 50%;
}

.hidden {
    display: none;
}

JS（使用jQuery）

$(document).ready(function() {
  $("#show").click(function() {
    $("#left1").toggleClass("left center");
    $("#right1").toggleClass("right hidden");
  });
});