0

使用 Bootstrap 响应式 - HTML 看起来像......

<div class="row-fluid Center">
    <div id="divMapCanvas" class="span6">
        <div id="map_canvas">
        </div>
    </div>
    <div id="divMapPanel" class="span6">
        <div id="map_panel">
        </div>
    </div>
</div>

测试网页： http: //gfw.yyyz.net/Contact

我想做的是最初隐藏 divMapPaneldiv并使 divMapCanvasdiv居中在页面上。然后按下方向按钮后，divMapCanvas 将向左移动，并出现 divMapPanel。我试过仅仅隐藏 divMapPanel，但我无法让 divMapCanval 居中。

在此先感谢您的任何建议？

4

1 回答 1

2

在包含画布的类的 div 上span6，您需要设置一个固定宽度（width: 526px;当我让它在您的示例页面上工作时我使用过，但您可以使用 % 代替，或者您有什么，但它不能设置为auto 这是默认设置），您还必须通过添加float: none;和来摆脱浮动margin: 0 auto;。

在divMapPanel您需要添加display: none, 以确保它不占用 DOM 中的任何空间。使用visibility: hidden例如将不起作用。

然后，当用户单击方向并且您想要并排显示两个元素时，您可以通过添加float: leftetc. 来摆脱这些设置，并且两个元素应该并排显示。

于 2012-07-07T10:58:40.817 回答