問題タブ [border-box]

以下のスニペットでは、最初の行にflex-grow: 1. 予想どおり、各 div は画面の 50% を占めています。

左の div にパディングを追加する場合、これはもはや当てはまりません。誰かが理由を説明できますか？

私は 3 つの li アイテムを持っています - それぞれの幅は 33.3% です。margin-rightそれぞれの間にギャップを作成しようとしています<li>が、余分なマージンにより合計<li>幅が 100% を超え、新しい行で分割されます。

ボーダーボックスのアプローチでこれを並べ替えることができますか? それをグローバルに適用しようとしましたが、うまくいきませんでした。

http://codepen.io/anon/pen/jbazaN

上部と左右にcssシャドウを設定しようとしていますが、高さを減らしています。ぼかし/半径に精通していますが、影を本当に短くしたいです。Wix テンプレートからの画像(まだアップロードできません。申し訳ありません)

誰か助けてくれませんか？私が見る最後のチャンスは、おそらくボーダーイメージを使用するでしょうが、可能であれば避けたいと思います。すべての提案に感謝します

写真のように右上の三角形を実現しようとしていますが、境界線の半径を適用すると、片側の半径のみを指定したため、境界線がすべての側面に適用されるのはなぜですか。border-top-right-radius: 5px;代わりに申請しましたborder-radius: 0px 5px 0px 0px;が、同じ結果が得られました。ヘルプはありますか？

HTML:

CSS:

要素のリストがあり、inline-blockカーソルを合わせた要素に境界線を追加したいと考えています。box-sizing: border-boxただし、要素の幅と高さを使用して明示的に定義している場合でも、境界線が要素をオフセットする方法に注意してください。以下の動作を示しました。

私が見つけた最善の解決策は、の代わりにoutlineandを使用することですが、元の方法が機能しない理由を知りたいです:/outline-offsetborder

UPDATE : BoltClock は本当に素晴らしい説明と提案をしてくれましたが (私が求めていたのはそれだけでした)、インライン要素で抱えていたほとんどすべての問題を解決したflexboxを完全に忘れていたことを言いたかっただけです。最終的な JSFiddle ソリューションのために、これを BoltClock の透明なボーダー トリックと組み合わせました。

ガターに使用するグリッドを作成していますpadding。widthガター（フルイメージ）が必要な場合があるため、 padding.

問題は、 を使用している50% width場合でも、を使用している場合border-box、真に ではないこと50%です。

縮小されたテスト ケース:

Jsフィドル

コード

これを回避する簡単な方法はありますか？

レスポンシブ Web サイトを自分で構築する方法を学んでいます。画像の 1 つの上下の境界線にあるボックス サイズの境界線ボックスに問題があります。高さの異なる 2 列の画像があります。エッジを一致させたいのですが、各画像を区切るために数ピクセルの余白も必要です。

私の問題は、上と下の境界線でボックスサイズのボーダーボックスを使用すると、画像の端の外側にとどまり、次の画像を数ピクセル下に押し下げて、下端の隣の画像と一致しなくなることです。

先に進み、他の画像に境界線を追加する前に、この問題を修正したいと思います。私は CSS を初めて使用するので、何か明らかな間違いがあるのではないでしょうか?

境界線が画像の内側の端にとどまるようにするための助けをいただければ幸いです。

何が起こっているかのスクリーングラブを添付しました。 ボーダーボックス問題