我的CSS:
body
{
font-family:verdana;
line-height:1.5em;
color:#666;
font-size:0.8em;
}
.objectAttributesOuter
{
border: 1px solid #999;
padding:6px;
margin:6px;
background-color:#EDEEFA
}
.objectAttributes
{
padding: 5px, 0px, 5px, 5px;
}
.whiteBoxWithBorder
{
padding:5px;
margin-right:5px;
background-color:#fff;
border: solid 1px #ccc;
float:left;
}
我的HTML:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<meta name="GENERATOR" content="Microsoft® HTML Help Workshop 4.1">
<Title>Details</Title>
<link rel = "stylesheet" href="css.css" type = "text/css" />
</HEAD>
<BODY>
<div class = "objectAttributesOuter">
<div class="objectAttributes">
<div class="whiteBoxWithBorder">
GetType()
</div>
<div class="whiteBoxWithBorder">
Returns the type ...
</div>
</div>
</div>
</BODY>
</HTML>
理想的呈现方式是在“ objectAttributesOuter”内部呈现“ whiteBox”,但是如您所见,它会重叠。如果删除float标签,那么2 div会在whiteBox内渲染,但是不要并排显示。
有什么想法可以让它们在“ objectAttributesOuter”标签中并排显示吗?
最佳答案
更改objectAttributesOuter类,如下所示;
.objectAttributesOuter
{
border: 1px solid #999;
padding:6px;
margin:6px;
background-color:#EDEEFA;
overflow:auto;
}