5

私は次のレイアウトを正しくしようとして夢中になっています:

  • 固定幅の左 div (複数の div が横に並んでいる可能性があります)
  • 自動幅の中央の div (残りのスペースを占有します)
  • 固定幅の右側の div (複数の div が横に並んでいる可能性があります)
  • 左か右かにかかわらず、中央の div と最初の隣人の間にマージンが存在する必要があります

HTML

<div class="container">
    <div class="all left">
        Left1
    </div>
    <div class="all left">
        Left2
    </div>
    <div class="all center">
        Center
    </div>
    <div class="all right">
        Right1
    </div>
    <div class="all right">
        Right2
    </div>
</div>

CSS

.container {
    display: table;
    position: relative;
    width: 100%;
    height: 100px;
    border-spacing: 5px;
}

.all {
    display: table-cell;
    border: 1px solid #333;
    margin: 5px;
}

.left {
    width: 45px;
}

.right {
    width: 45px;
}

.center {
    width: auto;
}

フィドル

http://jsfiddle.net/ozrentk/VdryG/3/

ただし、何を試しても (たとえばborder-spacing: 0px、左または右の div を配置したりmargin: 0、ボーダーを折りたたんだり)、すべてのマージンが同じになります。

簡単にするために、私はこれが欲しい：

+--------------------------------------------------------------+
|+-----++-----+  +------------------------------++-----++-----+|
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
|+-----++-----+  +------------------------------++-----++-----+|
+--------------------------------------------------------------+

しかし、現在私はこれを持っています：

+--------------------------------------------------------------+
|                                                              |
| +----+  +----+  +--------------------------+  +----+  +----+ |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| +----+  +----+  +--------------------------+  +----+  +----+ |
|                                                              |
+--------------------------------------------------------------+

このレイアウトで個々の余白を制御するにはどうすればよいですか?

PS

  • レイアウトの問題が発生するため、フロートと非フロートを混在させるソリューションは必要ありません。これを参照してください
  • css calc を使用したソリューションは実験的なものであるため、使用したくありません
  • この種のレイアウトには CSS を使用する必要があり、ちらつきが発生する可能性があるため、JS ソリューションは必要ありません。また、ユーザーは JS を無効にすることができます
4

3 に答える 3

2

レイアウト モデル全体を変更する必要がない簡単な解決策として、この編集されたフィドルのように、テーブル構造に目に見えないセパレーターを追加するだけです。

hr {
    display: table-cell;
    width: 10px;
    visibility: hidden;
}
于 2013-07-26T22:24:18.603 に答える
1

元のマークアップを使用した CSS のみのソリューション

table-cellディスプレイ タイプはマージンを認識しないため、左右のマージンを設定しても目的の結果が得られません。

回避策の 1 つはdisplay: block、.center要素で次のように指定することです。

.container {
    display: table;
    width: 100%;
    height: 100px;
    border-spacing: 5px;
}

.all {
    display: table-cell;
    border: 1px solid #333;
}

.left {
    width: 45px;
}

.right {
    width: 45px;
}

.center {
    width: auto;
    display: block;
    margin: 0 10px 0 10px;
    border: 1px solid red;
    height: inherit;
}

フィドル: http://jsfiddle.net/audetwebdesign/GNVfG/

1 つの制限は、.containerすべての.container子要素が同じ高さを継承または計算できるように、親ブロックが明示的な高さを必要とすることです。

マージンの問題を解決した提案をしてくれたIlya Streltsynに感謝します。display: block

于 2013-07-26T22:26:31.523 に答える
0

これはあなたが意味するものですか？

.center{
       margin-left: 10px;
    }

中央に左または右の余白を追加すると、必要な一意のギャップが得られます

于 2013-07-26T23:11:48.963 に答える