2

私は2つのhtmlコードを持っています。最初のコードではバックグラウンドが来ていません。しかし、2番目のコードでは、clear:both;を入れました。 コード、背景が来ています。高さの代わりに背景を表示する別の簡単なオプションはありますか? 高さと余分な div 構造を入れたくありません。

最初のコード:-

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
<body>
<div style="background:#990000;">
<div style="float:left;">left part</div>
<div style="float:right">right part</div>
</div>
</body>
</html>

2番目のコード:- 

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
<body>
<div style="background:#990000;">
<div style="float:left;">left part</div>
<div style="float:right">right part</div>
<div style="clear:both"></div>
</div>
</body>
</html>

あなたの親切な復帰は非常に高く評価されます。前もって感謝します。

4

3 に答える 3

1

以下のコードを試してください

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
 <body>
 <div style="background-color:#999000;overflow:hidden;">
        <div style="float:left;">left part</div>
        <div style="float:right">right part</div>
 </div>
 </body>
 </html>

を追加しoverflow:hiddenます。仕事になります。

ありがとう

于 2012-10-15T05:25:01.143 に答える
0

こんにちは今、あなたがフローティングを使用した場合、親divに明確な多くのオプションがあります

このように 最初は 

.mainclear{
background:#990000;
}

.mainclear:after{
content:'';
  clear:both;
  overflow:hidden;
  display:block;
}

セカンドは 

.mainclear{
background:#990000;
  overflow:hidden;
}

あなたの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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!-- please dont use height in background -->
<body>
<div class="mainclear">
<div style="float:left;">left part</div>
<div style="float:right">right part</div>
</div>
</body>
</html>

最初のデモ

--------- \

デモセカンド

于 2012-10-15T05:13:35.130 に答える
0

overflow:auto親divに追加

<div style="background:#990000; overflow:auto">

デモ

于 2012-10-15T05:49:34.277 に答える