10

これに対する答えはすでにわかっていると思いますが、サニティ チェックが必要です。

私が持っていると言う

#gridtest{
width:590px;
}

RESULT=TARGET/CONTEXT を使用して、幅をパーセンテージに変更できます。この場合、コンテキストは max-width が 1000px に設定されたコンテナーなので、次のようにできます。

#gridtestpercent{
width:59%; /*590/1000*/
}

ウィンドウを縮小すると、div は常にそのコンテナーに比例します。でもやりたいと思ったらどうしよう

#gridtest{
width:570px;
border:10px solid red;
}

現在 570 になっているターゲットに基づいて幅を調整できますが、ウィンドウが縮小されると、プロポーションがすべて同期しなくなります。

#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}

パーセンテージ境界線を使用できません。コンテキストをチェックし続けるために JS を使用したくありません。CSS3 の box-border 宣言はまだ使用できません。

Ethan Marcotte によるレスポンシブ Web デザインで説明されている技術を使用したい場合、すべてが相互に関連して縮小するというテクニックを使用したい場合、境界線を使用するとうまくいきませんか?

乾杯！

4

7 に答える 7

12

CSS3 calc()関数を使用できます。

.selector{
  border: 5px solid black;
  width: -moz-calc(50% - 10px);
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);
}

SASS ミックスイン

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}
article {
  border: 1px solid red;
  @include calc( width, '100% - 2px')
}
于 2013-04-10T19:39:32.210 に答える
8

ボーダーの代わりにインセット ボックス シャドウを使用できます。

box-shadow: 0px 0px 0px 10px red inset;

容器の内側にパッドを入れるだけで補うことができます。

編集：「パッド」と書きますが、もちろんパディングを使用すると、ボックスの寸法が崩れます。代わりに、内側のコンテンツをマージンにします。

于 2012-11-23T15:52:41.197 に答える
7

受け入れられた答えは正しくありません。実際には 2 つのオプションがあります。

プロパティを使用してbox-sizing、すべてのパディングとボーダーがサイズの一部と見なされるようにします。

.column {
    width: 16%;
    float: left;
    margin: 0 2% 0 2%;
    background: #03a8d2;
    border: 2px solid black;
    padding: 15px;
    font-size: 13px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

または、outlineborder プロパティの代わりに プロパティを使用します。パディングにはまだ問題がありますが、追加する方が簡単です。例：

.column {
    width: 16%;
    float: left;
    margin: 0 2% 0 2%;
    background: #03a8d2;

    outline: 2px solid black;
}

完全な説明: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

于 2014-04-23T17:18:30.027 に答える
5

残念ながら、はい、あなたは運が悪いです。この問題を回避するハックな方法の 1 つはdiv、境界線を作成するために使用するラッパーを使用することです。したがって、外側divは 57% (この例では) で、背景は目的の境界線の色です。次に、内側divの幅は 96% 程度になります (正確な数値で遊んで、デザインに適した境界線を見つけてください)。

于 2011-11-16T14:21:11.587 に答える
4

セマンティックを維持したい場合は、div { box-sizing:border-box; }またはいくつかの絶対配置:after要素を使用できます。投稿を参照してください。幅がパーセンテージの div に 1px の境界線を追加するにはどうすればよいですか?

于 2012-02-15T05:43:25.113 に答える
2

CSS3 では、新しいbox-sizingプロパティを使用して、ピクセルとパディング カウントをwidth要素のに含めることもできます。

box-sizing: border-box;
于 2014-07-10T16:43:18.853 に答える
0

可能であれば、デザインに応じて、幅が 3 ピクセル (たとえば ) で高さが親の div よりも高い絶対 div として境界線を配置することをお勧めします。次に、親 div にオーバーフローを非表示に設定します。

于 2013-09-15T19:48:55.607 に答える