Question

我需要创建一个父div，并在两个div内，一个应该在左侧，另一个应该在右侧。

我的问题是右侧的div定位在主要父级“ menu-bar-contained”之外。我该如何强迫它留在里面？

#menu-bar-container {    
	border-top: 1px solid #CCCCCC;
	background-color: #BB1919;
	width:100%;
	height:70px;    
}    
#menu-bar {    
	width:1000px;
	margin:0 auto;    
}    
h1 {
	padding:0;
	margin:0;
	color:white;
	font-size: 40px;
	font-weight: normal;
	padding-top: 10px;
	float:left;
}    
#local-news {
	border: 1px #BB4545 solid;
	float:right;
	width:250px;
	padding: 5px 5px 0 10px;
	margin: 5px 10px 0 0;    
}    
#local-news a {    
	color:black;
	text-decoration: none;
	font-size:30px;
	position:relative;
	top:-8px;    
}    
#local-news a:hover {    
	text-decoration: underline;    
}

<div id="menu-bar-container">
	<div id="menu-bar">
		<h1>NEWS</h1>
		<div id="local-news">
			<a href="#">Find local News</a>
		</div>
	</div>
</div>

实时：

https://jsfiddle.net/5h10e7xt/2/

Answer 1

第二个div位于父div之外的原因是，您将菜单栏设置为固定宽度：1000px

尝试：

#menu-bar {

   width:100%;
   margin:0 auto;

}

而且您不会在外面看到它。

Answer 2

在容器上使用flex：

display: flex;

从子div中删除float。

Answer 3

您需要具有div的float属性。在div的style属性中：菜单栏提及为和其他人一样

如何有两个div，父div的一个左侧和另一个右侧？

3 个答案: