Technical
公開日: 2024年02月10日
公開日: 2024年02月10日
【CSS】calcを使ってwidth:100%からマイナスpx指定する方法
レスポンシブで、Flexボックスの画像の幅は固定し、テキスト部分のみ伸縮させる時などに使えます。
こんな感じに
デモサイト
まずはデモサイトを開いて、ブラウザの横幅を伸ばしたり縮めたりしてみてください。
HTML
<div class="wrap"> <div class="view"><img src="https://sample.jp/samplepng"></div> <div class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト。</div> </div>
CSS
.wrap{
width: 100%;
display: flex;
}
.view{
width: 200px;
margin-right: 20px;
}
.text{
width: calc(100% - 220px);
}
便利ですね〜
