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 回答