Question

我正在尝试制作一个菜单框和视频框，但我的视频框与菜单div重叠，这里是我的代码。

<!doctype html>
<html>

   <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    .colm-1
    {
	    float:left;
	    display:block;
    }
    .my-video-box
    {
	width:300px;
	height:300px;
	background:#F00;
    }
    </style>
    </head>

    <body>
    <!--- My Menu Box --->
    <div class="colm-1">Colm 1</div>
    <div class="colm-1">Colm 1</div>
    <div class="colm-1">Colm 1</div>
    
    
    <!--- Video Box --->
    <div class="my-video-box"></div>
    </body>
    </html>

我的菜单div是浮动的，而我没有浮动我的视频div / box。

Answer 1

当你在div中使用float时尝试使用clear，然后尝试使用

<body>
<!--- My Menu Box --->
<div class="colm-1">Colm 1</div>
<div class="colm-1">Colm 1</div>
<div class="colm-1">Colm 1</div>
<div style="clear:both;"></div> <!-- You need to add this -->

<!--- Video Box --->
<div class="my-video-box"></div>
</body>

Answer 2

您可以在my-video-box div。

之前编写此html

<div style="clear:both"></div>

Div's over overpping？

2 个答案: