0

div私は別の中にHTMLを持っていますdiv:

<div class="content">
     <div class="block">
     blabla
     </div>
     <br/>
     <div class="block">
     blabla
     </div>
     <br/>
     <div class="block">
     blabla
     </div>
     <br/>
     <div class="block">
     blabla
     </div>
</div>

「blabla」を含む 4 つの小さなブロックが表示されることを期待していますが、代わりにそれらのブロックが領域全体を占めています (「コンテンツ」と同じ幅)。

期待と現実

親から子への継承を無効にするにはどうすればよいですか?

CSS:

.block {
  border-radius: 4px;
  border: 1px solid;
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
}

.content {
    margin: 0 auto;
    text-align: left;
    width: 940px;
    background-color: White;
    padding: 20px;
    font-size: 12px;
    border-radius: 7px 7px 7px 7px;
    min-height: 180px;
    height: 80%;
}

ありがとう

4

7 に答える 7

3

<div>, <p> デフォルトの 100% 幅を持つようなすべてのブロック要素。ここにいくつかのブロック要素のリストがありますhttp://htmlhelp.com/reference/html40/block.html

100% 未満の幅が必要な場合は、その要素に固定幅を割り当てる必要があります。

于 2012-08-30T11:18:49.560 に答える
2 
block{width: 50px;}

幅を固定します。すべてのブロック要素がデフォルトで 100% の幅になっているので、確認してください。Fabizio の ans も "Fabrizio Calderan's" ans も R8 であり、彼の ans を使用できる柔軟な幅です。

于 2012-08-30T08:51:04.047 に答える
2

でプロパティをオーバーライドしてみてwidthください。blockCSS ルール

.block{

  border-radius: 4px;
  border: 1px solid;
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
  width: 10%; /* or some precise value like 40px */
}

オーバーライドとは、親によって継承されたプロパティを上書きすることを意味します。ブラウザで Firebug などのツールを使用すると、オーバーライドされたプロパティとそれに関連付けられた新しい値を明確に確認できます。

于 2012-08-30T08:51:12.500 に答える
1

これらのルールを追加してみてください

.block {
  float: left; 
  clear: left;
  min-width: 100px; /* just to have some visual order */
}

.content {
  /* float clearing */
  height: auto; 
  overflow: hidden;
}

固定幅を設定することは、実際には必ずしも簡単ではない可能性があります (ラベルの長さのサイズが異なる場合、以前に 50 または 100px の幅を定義することはできませんinline-block) <br>。 ）。

.blocタイプミスがあることにも注意してください。.block

于 2012-08-30T08:52:28.067 に答える
0

.bloc のスペルを確認してください。.block JSFIDDLE http://jsfiddle.net/Bsa3C/1/です。

于 2012-08-30T08:53:24.773 に答える
0

あなたが提供したcssが上記のコード用であると仮定すると、コンテンツの内側のdiv要素に固定または柔軟な幅を与える必要があります

.block{width: 50px;}

また

.block{width:20%;}

幅は外側の要素から継承されません。デフォルトは 100% です。

于 2012-08-30T09:05:06.027 に答える