Question

我有一个div类widget，我将width和length样式应用到我的窗口小部件类中，但出于某种原因，宽度仍然是100％的屏幕而不是200px，就像我在下面定义的那样。有人可以帮忙吗？

这是一个小提琴：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}


.widget {

    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    width: 500px;
    height: 200px;
    padding: 7px;

}

    <body ng-controller="main_controller">
        <div class="widget">
            <h1>{[city]}, {[state]}</h1>
            <div>
                <h1 style="float: left">{[current_temp | degree]}</h1> <h1 style="float: right">afasf</h1>
            </div>
            <p>{[today_day]}</p>
            <p>{[today_high | degree]} / {[today_low | degree]}</p>
        </div>
    </body>

Answer 1

Cells内的

table应加起来为100%维度的table。您已将表格设为body元素width: 100%和height: 100% - 您的.widget是唯一的cell，因此可以使用整个空间的结果。只需删除display: table和display:table-cell规则，维度规则就可以正常运行：

https://jsfiddle.net/ilpo/ps17t1a5/3/

我不知道你为什么要首先使用display:table-cell，但我认为它是垂直和水平居中的。如果是这种情况，请改用：

position: absolute; //or relative or fixed depending on your needs
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Answer 2

你需要放200px而不是200.

Answer 3

高度和宽度定义不正确，它们应为500px和200px

Answer 4

从display: table中移除body会使所呈现的元素尊重width属性。

阅读the docs，它声明这会使div表现得像table元素。

在这种情况下，看起来table只包含一个cell，并且由于同一body元素的属性为width:100%，因此widget 1}}元素具有单元格的整个宽度（因此是表格的整个宽度，因此是页面的整个宽度）

这有意义吗？

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /*display: table;*/
}
.widget {
  /* added to show box boundaries */
  border: 1px solid green;  
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  margin: 0;
  width: 310px;
  height: 160px;
  padding: 7px;
}

<body ng-controller="main_controller">
  <div class="widget">
    <h1>juno, alaska</h1>
    <div>
      <h1 style="float: left">10</h1> 
      <h1 style="float: right">cool</h1>
    </div>
    <p>today</p>
    <p>69/ 88</p>
  </div>
</body>

html - 应用于div的css宽度不起作用

4 个答案: