gpt4 book ai didi

html - 为什么我的空 div 在使用 display inline 时有宽度但会折叠?

转载 作者:太空狗 更新时间:2023-10-29 14:54:19 25 4
gpt4 key购买 nike

当我使用内联显示来放置 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;}

最佳答案

因为这就是规范所说的。

Content width: the 'width' property

This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).

关于html - 为什么我的空 div 在使用 display inline 时有宽度但会折叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6177593/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com