1

我在使用时遇到问题width:100%，它不会拉伸到整个屏幕宽度，但如果我使用像素指定它，它会起作用。我不明白它是如何工作的。我想使用百分比在任何屏幕尺寸上自动调整。

/*width: 600px; */    /* THIS WILL WORK */
width: 100%;           /*WON'T WORK*/

JSFiddle：http: //jsfiddle.net/utBRH/9/

CSS：

    #wrapper{
        width:600px;
        height:600px;
        position:relative;
    }

    #search_box {   
        background-color:#050505;
        height:300px;
        /*width: 600px; */    /* THIS WILL WORK */
        width: 100%;           /*WON'T WORK*/ 
        display: table-cell;
        vertical-align: middle;
        text-align: center;

    }

    #btn_search_orange{
     display: inline-block;
      width: 40%;
      height: 80%;
      text-align: left;
      background-color:#e47700;
    }

    #btn_search_black{
      display: inline-block;
      width: 40%;
      height: 80%;
      text-align: left;
      background-color:#555454;

    }
4

3 回答 3

5

为了使这项工作，您需要将display: table;and分配width: 100%;给父元素，因为子元素设置为display: table-cell;

#wrapper{
    height:600px;
    position:relative;
    display: table;
    width: 100%;
}

演示

注意：我没有找到任何使用的正当理由display: table;，因为您可以轻松地使用浮点数来实现相同的目的。

于 2013-09-03T07:06:50.407 回答
0 
display: table-cell;

是问题，为什么不只使用块类型？

于 2013-09-03T07:06:55.110 回答
0

尝试删除display: table-cell;

于 2013-09-03T07:07:48.243 回答