Question

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

Answer 1

因为这就是规范所要做的。

Content width: the 'width' property

此属性不适用于   未替换的内联元素。该   未替换内联的内容宽度   元素的盒子就是那个   在其中呈现内容（之前   儿童的任何相对偏移量。）

为什么我的空div崩溃虽然它在使用显示内联时有宽度？

1 个答案:

Content width: the 'width' property