インラインブロック要素間の間隔を広げて配置を維持する

インラインブロックコンテナ内の要素間のスペースを増やすのに問題があります。私はそれをするためのトリックを見つけましたが、それは最初の行のためにのみ動作します... ところで、私はn個の要素と特定のコンテナの幅を持っています。インラインブロック要素間の間隔を広げて配置を維持する

コード：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .container { 
       background-color: blue; 
       height: 300px; 
       width: 620px; 
       display: inline-block; 
      } 

      .container div + div { 
       margin-left: 33px; 
      } 

      .child1 { 
       width:200px; 
       height: 100px; 
       display:inline-block; 
       background-color: red; 
      } 

      .child2 { 
       width: 200px; 
       height: 100px; 
       display: inline-block; 
       background-color: green; 
      } 

      .child3 { 
       width: 200px; 
       height: 100px; 
       display: inline-block; 
       background-color: yellow; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="child1"></div> 
      <div class="child2"></div> 
      <div class="child3"></div> 
     </div> 
    </body> 
</html>

結果：

（注：これは、すべてのブラウザをサポートする必要があり、+ IE7）

はどうもありがとうございました！

出典

2017-01-12 V. Sambor

セレクタnth-childセレクタを使用して、3人の子供を選択してください！

https://jsfiddle.net/25x4ga0g/1/

.container div:nth-child(2n + 1) { 
    margin-left: 0px; 
}

More about nth-child selector

出典

2017-01-12 08:57:01

これを行うには、Flexboxという素晴らしいものを使用できます。

まず、コンテナをdisplay: flexに設定します。次にflex-wrap: wrapを使用してください。要素を追加すると、下の新しい行に表示されます。また、要素が左から始まるように、必ずalign-content: flex-startを使用してください。最後にmargin-leftとmargin-bottomをすべてのchild-divに追加して、それらの間にスペースを入れます。私たちはFlexboxを使用しているため、マージンに関する問題は解消されます。

divにコンテナを完全に収めるには、child-divの余白を削除し、親をjustify-content: space-betweenに設定します。

CSSコード：

.container { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    width: 620px; 
    height: 300px; 
    background-color: blue; 
} 

.container div { 
    margin-right: 33px; 
    margin-bottom: 5px; 
} 
.child1 { 
    width: 200px; 
    height: 100px; 
    display:inline-block; 
    background-color: red; 
} 

.child2 { 
    width: 200px; 
    height: 100px; 
    display: inline-block; 
    background-color: green; 
} 

.child3 { 
    width: 200px; 
    height: 100px; 
    display: inline-block; 
    background-color: yellow; 
}

Working Fiddle

Read more about Flexbox

代替ソリューションあなたはフレキシボックスを使用したくない場合は、あなただけのすべての三人の子供を選択して設定することができます余白を0にして左：

.container div:nth-child(3n) { 
    margin-left: 0; 
}

助けてくれること

出典

2017-01-12 08:56:32 TheYaXxE

利用margin-rightの代わりmargin-left。

.container div { 
    margin-right: 33px; 
}

.container { 
 
    background-color: blue; 
 
    height: 300px; 
 
    width: 620px; 
 
    display: inline-block; 
 
} 
 
.container div { 
 
    margin-right: 33px; 
 
} 
 
.child1 { 
 
    width: 200px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background-color: red; 
 
} 
 
.child2 { 
 
    width: 200px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background-color: green; 
 
} 
 
.child3 { 
 
    width: 200px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background-color: yellow; 
 
}

<div class="container"> 
 
    <div class="child1"></div> 
 
    <div class="child2"></div> 
 
    <div class="child3"></div> 
 
</div>

出典

2017-01-12 09:00:05

コンテナの両端に正しいマージンが必要なので、これは機能しません...（私はちょうど中間にスペースが必要です） –

予想される結果が得られているようです。これがうまくいかないと思われるDOMの例を挙げることはできますか？ –

はい、単にコンテナ要素を調べて、幅を小さくします（ダブルクリックしてスクロールします）。実際の子ではなく、コンテナの幅が余白に当たったときに要素が下がっていることがわかります。それが欲しい。 –

あなたはこれを試してみましたか？

div+div:last-of-type{ 
      margin:0px; 
     }

このスニペットをスタイル部分に挿入してください。これは問題ありません。それは最後のdivのためだけに動作します。

出典

2017-01-12 09:00:52

インラインブロック要素間の間隔を広げて配置を維持する

答えて

関連する問題