Question

我想在div中显示两个div（header-logo和nav-menu）。一个漂浮到右边，另一个漂浮到左边。

每个div都是固定宽度（100px）。第二个div正在head-banner之外移动。我无法弄清楚为什么内容会溢出head-banner。

＆＃13;

     <!DOCTYPE html>
        <html>
        	<head>
        		<meta charset="UTF-8">
        		<style>
        
    		.head-banner{
    			background: cyan;
    			//overflow:hidden;
    		}
    		.header-logo{
    			width: 100px;
        			background:yellow;
float:left;
    		}
    		.nav-menu{
        background:green;
    			width:100px;
    			float:right;
    		}
    		</style>
    	</head>
    	<body>
    	<div class='head-banner'>
    			<div class='header-logo'>
    				div1
    			</div>
    			<div class='nav-menu'> 
    				div2
    			</div>
    		</div>
    	</body>
    </html>

＆＃13;

修改

我看不到.head-banner的颜色。我认为标题标识，导航菜单都被推出了。

如果我overflow head-banner被隐藏，它就会按预期工作。

我想知道为什么会这样。

Answer 1

你错过了漂浮物：左边是标志。

＆＃13;

     <!DOCTYPE html>
        <html>
        	<head>
        		<meta charset="UTF-8">
        		<style>
        
    		.head-banner{
    			background: cyan;
    			overflow:hidden;
    		}
    		.header-logo{
    			width: 100px;
    			background:yellow;
float:left;
    		}
    		.nav-menu{
        background:green;
    			width:100px;
    			float:right;
    		}
    		</style>
    	</head>
    	<body>
    	<div class='head-banner'>
    			<div class='header-logo'>
    				div1
    			</div>
    			<div class='nav-menu'> 
    				div2
    			</div>
    		</div>
    	</body>
    </html>

＆＃13;

Answer 2

保留一个div float:left和另一个float:right

     <!DOCTYPE html>
        <html>
        	<head>
        		<meta charset="UTF-8">
        		<style>
        
    		.head-banner{
    			background: cyan;
    			overflow:hidden;
    		}
    		.header-logo{
    			width: 100px;
    			background:yellow;
                float:left; 
    		}
    		.nav-menu{
        background:green;
    			float:right;
    		}
    		</style>
    	</head>
    	<body>
    	<div class='head-banner'>
    			<div class='header-logo'>
    				div1
    			</div>
    			<div class='nav-menu'> 
    				div2
    			</div>
    		</div>
    	</body>
    </html>

Answer 3

像这样改变：

.head-banner{
    background: cyan;
    overflow: hidden;<-------Added
}

.header-logo{
    width: 100px;
    background:yellow;
    float: left;<---------Added
}

.nav-menu{
    background:green;
    width:100px;
    float:right;
}

.head-banner{
    background: cyan;
    overflow: hidden;<-------Added
}

.header-logo{
    width: 100px;
    background:yellow;
    float: left;<---------Added
}

.nav-menu{
    background:green;
    width:100px;
    float:right;
}

<div class='head-banner'>
    <div class='header-logo'>
       div1
    </div>
    <div class='nav-menu'> 
       div2
    </div>
</div>

Answer 4

问题是第一个div仍然是display: block，导致第二个div显示在下一行。你可以通过几种方式解决这个问题：

将第一个div设置为float: left
将第一个div设置为display: inline-block

我个人的偏好是＃2，所以这就是我在下面的代码片段中所做的。

.head-banner{
  background: cyan;
}
.head-banner div {
  display: inline-block;
}
.header-logo{
  width: 100px;
  background:yellow;
}
.nav-menu{
  background:green;
  width:100px;
  float: right;
}

<div class='head-banner'>
  <div class='header-logo'>
    div1
  </div>
  <div class='nav-menu'> 
    div2
  </div>
</div>

Answer 5

我在谷歌找到了答案。

如果div使所有元素都浮动，则div将崩溃本身

即使在指定宽度之后，为什么内容在div中溢出

5 个答案: