1

私の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&reg; 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」タグ内に並べて表示する方法はありますか?

4

4 に答える 4

2

これをチェックしてくださいmyFiddle

使用する<div style="clear:both"></div>

于 2012-07-20T14:00:18.667 に答える
0

objectAttributesOuterにfloat：leftを置きます：

.objectAttributesOuter
{
    border: 1px solid #999;
    padding:6px;
    margin:6px;
    background-color:#EDEEFA;
    float:left;
}
于 2012-07-20T13:49:45.773 に答える
0

.objectAttributes に overflow:auto を配置してみて、それが役立つかどうかを確認してください。

コンテナと浮動要素に幅がある場合にも役立ちます。

于 2012-07-20T13:47:29.410 に答える
0

objectAttributesOuter クラスを次のように変更します。

.objectAttributesOuter
{
    border: 1px solid #999;
    padding:6px;
    margin:6px;
    background-color:#EDEEFA;
    overflow:auto;
}
于 2012-07-20T13:52:09.033 に答える