2

Skeleton Framework (http://getskeleton.com) を使用しており、背景色と白いコンテナ ページを持つページが必要です。

.container {padding:0 10px;}小さなデバイスのウィンドウのサイズを変更するときにレイアウトの中断を追加すると。ここで非常に明白な何かが欠けていることを願っています。レスポンシブ デザインを壊さずにコンテナにパディングを追加するにはどうすればよいですか?

4

5 に答える 5

2

あなたの投稿を正しく理解していれば、 これに対する私の解決策はここにありました。

これは背景が白いので、ボックス内にパディングが必要です。簡単です: 親の内側に を追加し、パディング: 10px と白い背景で適切にスタイルを設定しました。

CSS

div.inner {
    padding: 4px 4px 8px 12px;
    overflow:auto;
}

HTML

<div id="what_you_think" class="realm eight columns alpha"> 
    <div class="inner">
        <h3>You are <font style="color:black;">not</font>...</h3>

    </div>
</div>

結果

http://home.grandecom.net/~scottmorse/

于 2013-04-25T22:53:37.733 に答える
0

小さなメディアクエリの場合は、skeleton.cssを編集する（または独自のスタイルシートで上書きする）必要があります。

パディングを削除するルールをコメントアウトし、.container .one.column（など）ルールを20px減らします。これにより、正しいサイズと両側に10pxの余裕ができます。:)

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container { width: 300px; }

    /* removed to maintain margins
    .container .columns,
    .container .column { margin: 0; } */

    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column  { width: 280px; } /* this was reduced by 20px */
}

余談ですが、Nexus7のデバイス幅601pxのソリューションを作成する必要があります。

于 2013-01-14T17:28:00.843 に答える
0

パディングを追加したい DIV に box-sizing を使用すると、パディングを追加できます。これにより、パディングを考慮して div の幅が計算されます。

.someElementInSkeletonGrid {
    box-sizing: border-box;
}

これを使用して、スケルトン DIV にパディングを正常に追加できました。ブラウザのサポートもかなり良いです。

続きを読む: http://css-tricks.com/box-sizing/

ブラウザのサポート: http://caniuse.com/#feat=css3-boxsizing

于 2014-09-05T22:56:22.193 に答える
0

私はあなたの問題を誤解している可能性がありますが、パディングの代わりにマージンを追加しようとしましたか?

      <div class="two-thirds column">
          <div class="content">
              Your text etc here
          </div>
      </div>

コンテンツ クラスには margin-left:10px; があります。

于 2013-03-25T18:38:22.167 に答える
0

これはスケルトンでは残念です。

.container.column および .container.columns クラスにはそれぞれ 10px のパディングがあることに注意してください。コンテナー内の列を正しくネストすることで、一貫したパディングが得られます。

解決策の 1 つは、offset-by-one クラスを使用することです。これにより、左に 60 ピクセルのパディングが与えられます。

最後に、skeleton.css のコア クラスをハックして、必要なパディングを各要素に追加し、幅を縮小します。

于 2013-01-12T14:40:14.657 に答える