0

CSS display：table（インライン、行、セルなど）を使用してレイアウトを作成しました。apacheを使用してローカル開発を行っていますが、ページを更新すると、2つの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

あなたの質問は 2 行に関連していて.mode-bar-left、.mode-bar-right2 行にまたがっていますか? その場合、問題は空白に関連しています。インラインで並べて表示される 2 つの画像を考えてみてください。コード内のタグ間に空白がある場合、ブラウザに空白が表示されます。

解決策 #1:
ロジックを DOM の 1 つ上のレベルに引き上げます。display両方のモードバー要素の値をtable-cell(現在の ではなく) に変更します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 に答える