1

複数列のレイアウトに問題があります。メニューを 1 ～ 4 列に揃えたい div 要素のグループとして設計しました (画面の高さとメニュー項目の数によって異なります)。ハードコードすることはできません。

これが私のHTMLです（jsfiddle link）：

<nav id="sideMenu" class="side-nav">
    <article class="side-nav-content">
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
        <div class="content-box-nav-wrapper">
            <div class="content-box">
                <div class="box-header pre-box-header"></div>
                <div class="box-header">
                    <p>Option1</p>
                </div>
                <div class="box-header post-box-header"></div>
                <div class="box-content">
                    <a>Link1</a>
                    <a>Link2</a>
                </div>
            </div>
        </div>
    </article>
</nav>
<div class="content">
    <p class="wrong">This should be on the right side of mneu.</p>
</div>

私のCSSは次のようになります。

p, a {
    color: black;
}

#sideMenu {
    float: left; /*This float seems to mess up column layout's width*/
}

article.side-nav-content {
    -webkit-column-width: 255px;
    -moz-column-width: 255px;
    column-width: 255px;
    -webkit-column-gap: 28px;
    -moz-column-gap: 28px;
    column-gap: 28px;
    -moz-column-fill: auto;
    height: 200px;
}

.side-nav .content-box {
    border: 1px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin: 0px 0px 23px 0px;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    width: 255px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

.content {
    width: 100vw;
    height: 100vh;
    float: left;
}

.wrong {
    color: red;
    font-size: 20px;
}

body {
    width: 200vw;
    overflow-x:hidden;
}

ブラウザーで #sideMenu を調べると、3 列として表示され、幅が必要であるにもかかわらず、最初の列の幅しかないことがわかります。

どうすればこれを修正できますか? (赤いテキストは、右側の最後のボックスの横にある必要があります)

問題のある画像

ページコンテンツの横にフロートが必要なので、フロートを削除することは良い解決策ではありません。

ユーザーのクリックでメニューを前後にスライドさせたいので、メニュー div とページ コンテンツをフローティングする必要があります。ユーザーのアクションでメニューの幅を 0% から 100% に変更したいのですが、コンテンツがメニューに干渉するため、それはできません。Chrome と Firefox の最新バージョンでテストしました。

4

1 に答える 1

0

私は同じ問題を抱えていましたが、思いついた唯一の方法はJavaScriptを使用することです。(列幅は、列 div のコンテンツの量とウィンドウ サイズに基づいて動的になるため)。

したがって、#sideMenu には「position: relative;」が必要です。次に、javascript で、style.left を、少なくとも document.getElementById('columnContainer').clientWidth で取得できる列コンテナーの幅に設定します。

必要に応じて、ここで jsfiddle またはその他のコードを提供できます。

少なくとも、ボディのロード時およびウィンドウのサイズが変更されるたびに、javascript 関数を呼び出す必要があります。

幸運を

于 2015-10-13T07:57:29.863 に答える