CSSのcalcで、width:100%からマイナスpx指定する
CSSでcalcがあるのを知ってましたが、使いどころがわからずに、放置していました。
例えば、こちらのサンプルのように、レスポンシブなどで、画像の幅は固定し、テキスト部分は伸縮する時に使えますね。
SPONSORED LINK
HTML
|
1 2 3 4 |
<div class="wrap"> <div class="pht"><img src="https://placehold.jp/240x200.png"></div> <div class="text">テキストがはいります。</div> </div> |
CSS
calcで幅100%から画像とマージン分を引いているだです。
|
1 2 3 4 5 6 7 8 9 10 11 |
.wrap { width: 100%; display: flex; } .pht { width: 240px; margin-right: 20px; } .text { width: calc(100% - 260px); } |
こんなに便利なら、はやく試しておけばよかったです(-_-)