0

我有一个使用 CSS display:table（内联、行、单元格等）构建的布局。我正在使用 apache 对其进行本地开发，当我刷新页面时，两个 div 容器排列不正确。但是，如果我取消选中并重新选中 display:table-row，它们会自行更正，并且页面会正确显示。

http://jsfiddle.net/fNNKT/

您可以在上面的 jsFiddle 中看到 HTML 和 CSS。它实际上也不在那里工作，所以也许我做错了什么，并且可以使用帮助。

                <div class="cabinet-container">
                <div class="mode-bar">
                    <div class="mode-bar-left">
                        <div class="mode-bar-item">logo</div>
                        <div class="mode-bar-item active">Dispense</div>
                        <div class="mode-bar-item">Inventory</div>
                    </div>
                    <div class="mode-bar-right schedule">
                        <div class="mode-bar-item">Sign-Out</div>
                    </div>
                </div>
                    <div class="table"></div>
                    <div class="left-container"></div>
                    <div class="center-container">
                        <div class="search-container">
                            <div class="table-cell">
                                <div class="search-field"></div>
                            </div>
                        </div>
                        <div class="nav-button-center-container">
                            <div class="table-cell">
                            </div>
                        </div>
                        <div class="list">
                            <div class="table-cell">
                                <div class="list-item-center-container"></div>
                                <div class="list-item-center-container"></div>
                                <div class="list-item-center-container-partial"></div>
                            </div>
                        </div>
                        <div class="nav-button-center-container-down-active">
                            <div class="table-cell"></div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="button-group table-border-5">
                            <div class="button-secondary">Dispense Non-Drug</div>
                            <div class="button-secondary">Sort By: Last Name</div>
                        </div>
                        <div class="button-group-right table-border-5">
                            <div class="button-primary">New Clinical Order</div>
                        </div>
                    </div>
            </div>​
4

2 回答 2

1

你在使用任何 javascript/jQuery 吗？在我自己最近的一个项目中，我遇到了类似的问题，我所要做的就是将我的自定义灯箱脚本从标签之前的右侧移动，它似乎解决了这个问题。有时javascript可能会像那样不稳定。我不明白为什么，但就是这样。

于 2012-11-15T23:19:58.917 回答
1

您的问题是否与两行相关.mode-bar-left并包含在内？.mode-bar-right如果是这样，则问题与空白有关。想想两个并排显示的图像。如果代码中的标签之间有空格，浏览器中就会显示空格。

解决方案#1：
将你的逻辑在 DOM 中提升一个层次。display将两个 mode-bar 元素的值更改为table-cell（而不是 current inline-table）。然后将.mode-bar-item元素更改为display: inline-block（而不是table-cell）。

解决方案 #2：
一个更快、不太优雅的解决方案是添加float: left到.mode-bar-left.

关于优雅的主题，我强烈建议您考虑一些语义上更有意义的标签，而不仅仅是div. 例如，.mode-bar-left显然是一个列表（ul也许？），而.mode-bar-item元素显然是列表项（li）。

于 2012-11-16T00:45:56.257 回答