BinaryDevelop
  1. ホーム
  2. html

[解決済み] cssとhtmlでdivの高さを設定する方法

2022-03-10 01:49:06

質問

Twitter Bootstrapを使っています。htmlに書きました。 

<div style="height:100px;" class="span12">
asdfashdjkfhaskjdf
</div>

そのページを開くと、高さが100pxになっていないのはなぜですか？

<ブロッククオート

後世のために、元のコードは: <div height="100px">

解決方法は？

インラインスタイルで記述する場合は、以下のようにします。 

<div style="height: 100px;">
asdfashdjkfhaskjdf
</div>

インライン・スタイリングは有用ですが、ほとんどの場合、推奨されません。

より適切な解決策は、別の CSS シートを作成して HTML 文書に含め、ID またはクラスのいずれかを使用して div を参照することです。

ファイル構造があれば 

index.html
>>/css/
>>/css/styles.css

そして、HTMLドキュメント内の <head> と </head> を書きます。 

<link href="css/styles.css" rel="stylesheet" />

そして、div構造を次のように変更します。 

<div id="someidname" class="someclassname">
    asdfashdjkfhaskjdf
</div>

cssでは、IDまたはCLASSからdivを参照することができます。

そうするためには、次のように書きます。 

.someclassname { height: 100px; }

または 

#someidname { height: 100px; }

両方やった場合、ファイル構造のさらに下に来るものが実際に動作するものになることに注意してください。

例えば... もし、あなたが 

.someclassname { height: 100px; }

.someclassname { height: 150px; }

すると、この状況では高さは150pxになります。

EDITです。

あなたの編集にある二番目の質問に答えるために、おそらく必要なのは overflow: hidden; または overflow: visible; . また、こんなこともできます。 

<div class="span12">
    <div style="height:100px;">
        asdfashdjkfhaskjdf
    </div>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します