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>

我期待看到 4 个包含“blabla”的小块，但这些块占据了整个区域（与“内容”的宽度相同）

期望与现实

如何禁用父子继承？

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

Every block element like <div>, <p> having default 100% width. here is list of some block element 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

try to add these rules

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

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

setting a fixed width could be in fact not always easy (if your labels may vary in length size you can't previously define a width of 50 or 100px ) and using inline-block will put those label side-by-side aligned (assuming no <br> is used).

Be also aware you have a typo: you wrote .bloc instead of .block

于 2012-08-30T08:52:28.067 回答
0

Check the spelling of .bloc it is .block JSFIDDLE http://jsfiddle.net/Bsa3C/1/

于 2012-08-30T08:53:24.773 回答
0

Assuming the css you provided is for the code above, then you should give the inside div elements of content a fixed or flexible width like

.block{width: 50px;}

or 

.block{width:20%;}

width is not inherited from the outside element, it is default to 100%

于 2012-08-30T09:05:06.027 回答
0

如果你不想设置宽度，你也可以试试这个：

.block { display:inline-block }
于 2013-12-03T02:38:27.423 回答