Question

我在使用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;

    }

Answer 1

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

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

Demo

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

Answer 2

display: table-cell;

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

Answer 3

尝试删除display: table-cell;

两列div和宽度百分比

3 个答案: