0

たとえば、次のdivが表示されます。

<div class="circle"></div

.circle { 
   width: 300px;
   height: 300px;
   background: red; 
   border-radius: 50%;
}

ただし、幅と高さが％の場合、折りたたまれます。

.circle { 
       width: 30%;
       height: 30%;
       background: red; 
       border-radius: 50%;
    }

表示する方法はありますか？

4

2 に答える 2

5

これは、div に高さがないためです。width: 30%;常に div を親 (<body>この場合は ) の 30% 幅にします。これが必要です。ただし、高さの動作は少し異なります。

次のように、body と html に 100% の高さを指定する必要があります。

html,
body {
  height: 100%;
}

働くフィドル

ここでheight: 100%;なぜそのように振る舞うかを読むことができます

于 2013-03-14T17:32:06.070 に答える
3

どこかでハード幅/高さを宣言する必要があります。この例では、コンテナー div にハード幅/高さを設定しています。

http://jsfiddle.net/exrNm/1/

<div class="con">
    <div class="circle"></div
</div>

.con{
    width:300px;
    height:300px
}

.circle { 
   width: 30%;
   height: 30%;
   background: red; 
   border-radius: 50%;
}

親チェーンのどこかにハード幅を簡単に設定できます。% には、計算するのに難しい値が必要です。

于 2013-03-14T17:34:24.907 に答える