6

Web サイト内のコンテンツ領域の上部に作成しようとしている非常に単純なサブナビゲーションがいくつかありますが、CSS にはそのような一般的な問題に対する単純な解決策がないようです: 3 または 4 のいずれかが必要です。ページの上部に等間隔の DIV を配置します。

1) 例: 3 つの可変幅、等間隔の DIV

[[LEFT]                [CENTER]               [RIGHT]]

2) 例: 4 つの可変幅、等間隔の DIV

[[LEFT]    [LEFT CENTER]    [RIGHT CENTER]    [RIGHT]]

3 つの DIV のみに関する最初の問題に対する私の解決策は、左右の DIV をフロートさせ、中央の DIV に任意のサイズを割り当てて、「マージン: 0 自動」にすることでした。これは実際には解決策ではありませんが、ナビゲーションに変更がないと仮定すると、結果をどのようにしたいかの大まかな概算が得られます。

4 つの DIV に関する 2 番目の問題に対する解決策は、以前と同じ方法で DIV を単純に中央に配置し、その中に 2 つの DIV をフロートすることです。

[[LEFT]    [[LEFT CENTER]    [RIGHT CENTER]]    [RIGHT]]

ただし、この場合も、配置のために中央の DIV に任意のサイズを適用する必要があり、サイトに言語または画像の変更が加えられた場合、配置の値を再計算する必要があります。また、構造とプレゼンテーションを統合する必要がある、単純に複雑すぎるソリューションです。

どんな助けでも大歓迎です。

編集 2012 年 7 月 20 日午後 5 時

さて、パーセントを使用して「テーブルセル」ソリューションを配置しましたが、もう少し複雑な実装で別の問題に遭遇しました。目前の問題は、参照していた各 DIV が実際にはさらに 2 つの DIV のコンテナーであるということです。 float または display:inline-block によってインライン化されたアイコンとラベルのペア。

例http://jsfiddle.net/c3yrm/1/

ご覧のとおり、リストの最後の要素が正しく表示されていません。

どんな助けでも大歓迎です！

編集 2012 年 7 月 20 日午後 7 時 16 分

arttronics の助けを借りた最終的な解決策: http://jsfiddle.net/CuQ7r/4/

4

4 に答える 4

3

参考：jsFiddle Pure CSS Demo

解決策は、パンくずリストの総数に基づいてfloatパンくずリストのパーセンテージを決定する単純な式を使用しながら、個々のパンくずリストにありました。width

于 2012-07-21T02:01:41.427 に答える
1

パーセンテージを使用することもできますが、単純な計算になります。

[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px

次に、コンテナの幅を指定して使用できます

display:inline;

それらをインラインに保つために。

注: 境界線を使用して div の動作を確認すると、見知らぬスペースが追加されるため、要素の幅を 1% 程度減らすか、背景色を変更する必要があります。

于 2012-07-20T21:08:27.283 に答える
0

私が見つけた 1 つの方法は、フレックス ボックス (またはインライン フレックス) を使用することです。

これは、それがどのように行われるかの素晴らしい説明と例です。

将来的には、フレックス ボックスがこの種の処理の優れた方法になると思いますが、他のブラウザが flex-basis 属性の使用方法に関する Mozilla の考え方に追いつくまで (min-content、max-content、 fit-content などを値として)、これらのフレックス ボックスは、レスポンシブ デザインでは引き続き問題となります。たとえば、ウィンドウが押しつぶされたときに内部コンテンツ (a_really_really_long_word) が割り当てられたスペースに収まらない場合があり、注意しないと画面の右側にいくつかのものが表示されないことがあります。

flex-wrap プロパティを利用すれば、すべてが確実に収まるようになるのではないかと思います。これがどのように行われるかの別の例を次に示します (いずれにしても Mozilla ブラウザーで)。

私は、幅がかなり固定されている (小さすぎない) レターヘッドやテーブルにフレックス ボックスを使用する傾向があります。私は、ネストされたフロート オブジェクトとインライン ブロック オブジェクトを、コンテンツを非常に小さく圧縮する必要がある Web サイトに使用する傾向があります (ここの他の回答で示唆されているように)。

于 2016-04-08T18:08:18.527 に答える
0 
ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the magic dust that ensure equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

ここのように: http://jsfiddle.net/QzYAr/

于 2012-07-20T20:58:15.630 に答える