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.

Answer 2

这是一个使用实际浮动http://jsfiddle.net/tprats108/DNve9/

的javascript示例

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

中心对齐DIV默认并左对齐

2 个答案:

See example fiddle.