web-dev-qa-db-ja.com

CSSでパーセンテージマージンを使用しますが、ピクセル単位で最小マージンが必要ですか？

margin: 0 33% 0 0;を設定しましたが、マージンが少なくとも特定のpx量であることも確認したいと思います。 CSSにmin-marginがないことを知っているので、ここにオプションがあるかどうか疑問に思っていましたか？

cssmargin
35
Brett

divと％widthおよび静的なmin-width要素の右側。

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
19
bogatyrjov

ここでの真の解決策は、メディアクエリのブレークポイントを使用して、33％が機能しなくなったため、ピクセル単位の最小マージンでオーバーライドする必要があるかどうかを判断することです。

/*Margin by percentage:*/
div{
    margin: 0 33% 0 0;
}

/*Margin by pixel:*/
@media screen and ( max-width: 200px ){
    div{
        margin: 0 15px 0 0;
    }
}

上記のコードで、max-width画面幅に関係なく、33％の右マージンが機能しなくなります。

31
Clarus Dignus

これを試すことができます

.mm:before {
    content: "";
    display: inline-block;
    width: 33%;
    min-width: 200px;
}
19
Ever

Carl Papworth、この場合、これを使用できます：

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
4
Andre Duarte

これはどう？

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
1
GlennFriesen

spanを使用している場合、次のようにする必要があります。

span{
display:block;
margin:auto;
}

作業デモ

あなたがdivを使用している場合、uはこれを行うことができますよりも：

div{
  margin:auto;
}
1
Phoenix

前述のソリューションをいくつか試しましたが、流動的で真にレスポンシブな設定で、最適なオプションはそれぞれのコンテナ/ラッパーに適切なパディングを設定することだと思います。例：スタイル：

 html {
   background-color: #fff;
   padding: 0 4em;
 }
 body {
   margin: 0 auto;
   max-width: 42em;
   background-color: #ddf;
 }

ここで、さまざまなウィンドウ幅で遊んでみて、さまざまなフォントサイズを試してください。

working demo も試してください。

0
untill

アイテムを「コンテナ」divに保持し、必要な「最小マージン」に正確にパディングを設定できます。探しているものとは異なる場合がありますが、最小マージンサイズの感覚が得られます。

<div class="container">
   <div class="your_div_with_items">
   'items'
   </div>
</div>

次に、CSS：

.container
{
   padding: 0 'min_margin_ammount' 0 0;
}

.your_div_with_items
{
   margin: 0 33% 0 0;
}
0
lmigas

私の知る限り、要素の周囲にdivを配置して、パディングを定義できます。外部要素のパディングは、内部要素のマージンに似ています。

少なくとも1pxのマージンが必要だと想像してください。

<div style="padding:1px">
  <div style="margin: 0 33% 0 0;">
      interesting content
  </div>
</div>

編集：これはImigasの答えのようなものですが、私は理解しやすいと思います。

0
TheTrowser

画面の幅/高さの特定の割合がピクセル単位の長さよりも小さいかどうかをテストすることもできます。

JavaScriptを使用したこれに対する簡単なソリューションを次に示します。

<body>
 <div id="demo">
  <p> Hello World! </p>
 </div>

 <script>
  if (((window.innerWidth / 100) * 33) < 250) { /* Gets 33% of window width in pixels, tests if it is less than required minimum length (250px) */
  document.getElementById("demo").style.margin = "0 250px 0 0" /* If true, set margin to length in pixels */
  } else {
   document.getElementById("demo").style.margin = "0 33% 0 0" /* If not true, the Widow is big enough and percentage length is set */
   }
 </script>
</body>
0
Quijibo