gpt4 book ai didi

html - CSS 问题,除非填满文本,否则 Col 不会留在原地

转载 作者:太空宇宙 更新时间:2023-11-04 16:25:15 24 4
gpt4 key购买 nike

我有 3 个 float 组成我的布局,但是即使两个部分完全相同,但除非我在其中放置文本,否则一个部分不会保持其形状。

我的 html;

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="css.css" type="text/css" />
</head>

<body>
<div id="pagewidth" >
<div id="header"><h2>Head</h2></div>
<div id="twocols">
<div id="maincol"><h1>Main Content Column</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> </div>
<div id="rightcol"><p>a</p></div>
</div>
<div id="leftcol"></div>
</div>
</body>
</html>

我的 CSS,是 rightcol 无法正确显示。

html, body{ 
margin:0;
padding:0;
text-align:center;
}

#pagewidth{
width:100%;
hight:100%;
text-align:left;
margin:0 auto;
}

#header{
position:relative;
height:3%;
background-color:#000000;
width:100%;
display:block;
overflow:auto;

}

#leftcol{
width:5%;
height:97%;
float:left;
position:absolute;
background-color:#000000;

}

#twocols{
width:90%;
height:97%;
float:right;
position:relative;
}

#rightcol{
width:5%;
float:right;
position:relative;
background-color:#000000;
}


#maincol{
background-color: #FFFFFF;
float: left;
position: relative;
width:94%;
}

最佳答案

#rightcol 没有定义高度,因此它的高度为 0,所以它不会显示,除非它被填充了东西。

关于html - CSS 问题,除非填满文本,否则 Col 不会留在原地,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5689842/

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