gpt4 book ai didi

css - 动态扩展标签

转载 作者:行者123 更新时间:2023-11-28 14:25:20 25 4
gpt4 key购买 nike

我在设置 div 和 body 标签以动态扩展到内部包含时遇到问题。

这是我正在使用的 HTML 和 CSS,它有点长。

  <!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 charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
body
{
background:white;
}

.clearfix {
min-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
#searchform
{
position:absolute;
height:110px;
clear:both;
}
#b2_sbox_middle
{
width:980px;
height:99px;
background:url('img.jpg') repeat-x;
border:1px solid #00CCCC;
}
#b2_inner_sf
{
margin-top:10px;
}
#sf_ch_container
{
clear:both;
margin-left:27px;
font-size:18px;
}

#sf_ch_formtitle
{
float:left;
width:202px;
font-size:18px;
text-align:left;
}
#sf_ch_stype
{
float:left;
}
.stype
{

float:left;
margin-left:27px;
text-align: left;
}
</style>
<body>
<div align="center" class="clearfix">
<div id="searchform" align="center" style="top:105px; width:980px; margin-left:-490px; left:50%;" class="clearfix">
<div id="b2_sbox_middle">
<div id="b2_inner_sf" class="clearfix" style="border:0px solid;">
<div id="sf_ch_container" class="clearfix">
<div id="sf_ch_formtitle">SEARCH </div>
<div id="sf_ch_stype"> SEARCH</div>
</div>
<div class="stype">
<input name="text" class="search-input" type="text" value="key" size="20" maxlength="50" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>

如果您在 Firefox 或 Chrome 中运行代码,按 F12 并观察 body 标签和 body 之后的第一个 div 的高度,您会发现没有动态更改它们的高度以包含内部内容。

我不知道CSS哪里有问题。

第二个问题,如果您使用 IE v.6 进行预览,您会看到所有输入字段都是无序的,我不明白为什么?

任何帮助将不胜感激!!

最佳答案

由于#searchform 是绝对定位的,它的父元素的高度将为 0。你可以尝试:

body, body>div{min-height:100%;}

这是一个 fiddle :http://jsfiddle.net/jEfMx/

关于css - 动态扩展标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8023279/

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