CSS_ div 要素 の横幅を内容に合わせる

div ( ブロック ) 要素の横幅は、
通常 100 % ( 親要素の横幅と同じ )になる。

要素の幅と高さの %

相対的な単位。
ブラウザの大きさを変えても、幅を一定の比率を保つ。

要素の幅 ÷ 親要素のコンテンツ幅 × 100

高さも同様。

 

内容に合わせて幅を変えるには、2 通りある。

  • display プロパティinline-block を設定
  • float プロパティを設定する方法。

float は奥が深そうなので機会あった時。

 

inline-block を設定する

IE7 以前の場合、対応していないらしい。

inline-block 未設定
f:id:koshinRan:20170820013625j:plain

 

inline-block 設定
f:id:koshinRan:20170820013733j:plain

CSS

.fit {
 display: inline-block;
 background-color: #FFE4C4;
}

 

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
 <meta charset="UTF-8">
 <title>test</title>
 <link rel="stylesheet" type="text/css" href="CSS.css" />
</head>

<body>

   <div class="fit">
   品薄商品
   </div>

</body>
</html>

 

HTMLに直接指定

<div style = "display: inline-block; background-color: #FFE4C4;">
品薄商品
</div>

 

 

inline-block は、
要素全体としてはインライン要素のような表示形式となる為、
縦に並べたい時は改行タグを入れたりする必要がある。

f:id:koshinRan:20170820013833j:plain

 <div class="fit">
 品薄商品
 </div>
 
 <br/>
 
 <div class="fit" style="background-color: #F0FFF0;">
 品薄商品
 </div>

インライン要素
文章の一部として扱われる。前後に改行は入らない。

 

こちらから。
http://bayashita.com/p/entry/show/52
http://frogie.blog.fc2.com/blog-entry-3.html
http://design-spice.com/2014/03/24/percentag/

 

以上。