为什么使用显示内联时我的空div虽然有宽度，但为什么会折叠？

问题描述

| 当我使用display inline放置div＃hlogo，div＃hdesign和div＃hTestimonial时，尽管我已在其上设置了宽度，但div仍然折叠。 HTML：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<Meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Slicing</title>

</head>

<body>
<div id=\"wrapper\">
    <div id=\"header\">
        <div id=\"hlogo\">
                <div class=\"Hlogo\">

                    <div id=\"logoheader\">RamblingSoul</div>
                    <div id=\"logodesc\">
                        <p> A Free CSS Template From </p>
                        <p>RamblingSoul</p>
                    </div>
                </div>

        </div>
        <div id=\"hdesign\">

        </div>
        <div id=\"hTestimonial\">

        </div>
    </div>
    <div id=\"body\">
    </div>
    <div id=\"footer\">
    </div>
</div>
</body>

CSS：

html,body{  
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;

    }
div#wrapper{    
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        line-height:normal;
        border: #060 thick groove;
        background-color:#FF3;
        font-size:10px;
        line-height:1.5px;
    }

div#wrapper div#header{
        width:100%;
        height:30%;
        border:#F00 medium double;

    }


div#wrapper div#body{
        width:100%;
        height:50%;
        border:#F00 medium double;

    }

div#wrapper div#footer{
        width:100%;
        height:20.0%;
        border:#F00 medium double;

    }



div#wrapper div#header div#hlogo{
        width:30%;
        height:100%;
        border:#F00 medium double;
        //float:left;
        margin:0px ;
    }

div#wrapper div#header div#hdesign{
        width:100%;
        height:100%;
        border:#F00 medium double;
        //float:left;
        margin:0px 250px;
    }

div#wrapper div#header div#hTestimonial{
        //width:40%;

        width:30%;
        height:100%;
        border:#F00 medium double;
        float:right;

    }

    div#wrapper div#header div#hlogo,div#wrapper div#header     div#hdesign,div#wrapper div#header div#hTestimonial{display:inline;}

解决方法

因为这就是规范所说的。内容宽度：\'width \'属性此属性不适用于不可替换的内联元素。的未替换内联的内容宽度元素的盒子是在其中渲染内容（之前孩子的任何相对偏移）。

div 使用使用使用内联宽度宽度折叠显示显示