0

我的布局有问题。我目前有一个display: none和position: fixeddiv，当您点击页面中的按钮时会显示。在这个 div 中有一个供用户选择的按钮表。

我遇到的问题是，如果我没有为此窗口设置高度，它会变成整页大小，它会变成整页高度。这对我来说是个问题，因为按钮编号会发生变化，我将无法为每个按钮使用固定高度。

我做了一些小提琴，第一个是设置了高度的 div：http: //jsfiddle.net/gbRzt/ 第二个没有设置高度：http: //jsfiddle.net/gbRzt/1/

这与问题无关，但这也是我遇到的问题。在最后一行按钮中，#7 和#8 没有居中。有没有办法让他们像其他人一样居中？

4

2 回答 2

1

您应该摆脱top和bottomon .bankingDialog，position: absolute;也是比fixed这种情况更好的选择。

.bankingDialog {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    margin: auto;
    width: 800px;
    height: 500px;
    padding: 1em;
    z-index: 200;
    background-color: #fff;
    border-radius: 15px;
}

您不相关问题的答案：

看看这个jsFiddle。您正在使用不需要的段落和表格。div用's only做你想做的事情要容易得多。

HTML

<div class="bankingDialog" id="bankingWeaponsDialog">
    <div class="centerer">
        <div class="bankingbuttons">Lorem Ipsum</div>
        <div class="bankingbuttons">Bot #1</div>
        <div class="bankingbuttons">Bot #2</div>
        <div class="bankingbuttons">Bot #3</div>
        <div class="bankingbuttons">Bot #4</div>
        <div class="bankingbuttons">Bot #5</div>
        <div class="bankingbuttons">Bot #6</div>
        <div class="bankingbuttons">Bot #7</div>
        <div class="bankingbuttons">Bot #8</div>
    </div>
</div>

CSS

.bankingDialog {
    text-align: center;
}
.centerer {
    width: 600px;
    margin: 0px auto;
}
.bankingDialog .bankingbuttons:first-child {
    display: block;
}
.bankingDialog .bankingbuttons {
    display: inline-block;
}
.bankingDialog2 {
    margin: 0 auto;
    width: 500px;
}
于 2013-05-11T22:30:47.187 回答
1

尝试这个：

银行Dialog2 CSS类

银行对话框 css 类

会产生这个： 结果

请注意，如果您希望div#rightColanddiv.bankingDialog都向左对齐并避免div.bankingDialog超过div#rightCol，您可能会给出div.bankingDialoga margin-leftofdiv#rightCol的宽度。或者将div#rightColanddiv.bankingDialog放在同一级别并同时执行float: left。

编辑：如果您希望任何容器可滚动，您可以这样做：

http://jsbin.com/anixeq/1/

于 2013-05-11T23:01:52.693 回答