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

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

在容器上使用 flex：

display: flex;

从子 div 中删除 float。

Answer 2

您需要为 div 设置浮动属性。在 div 的样式属性中：菜单栏提及为另一个也一样

Answer 3

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

试试这个：

#menu-bar {

   width:100%;
   margin:0 auto;

}

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

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

How to have two divs, one left side another right side of parent div?

html

css

menu