CSS定位元素彼此相邻

Question

我想知道你是否可以帮我定位两个div,mainContent和sideContent彼此相邻？

HTML:

<div id='main'>
  <div id='mainContent'>
  </div>
  <div id='sideContent'>   
  </div>
</div>

CSS:#

#main { width: 100%; min-height: 400px;
    background: #0A3D79; /* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(20,114,199)), to(rgb(11,61,122))); /* for webkit browsers */
    background: -moz-linear-gradient(top,  rgb(20,114,199),  rgb(11,61,122));} /* for firefox 3.6+ */
    /*gradient code from http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient*/

    #mainContent { width: 75%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: blue; }
    #sideContent { width: 22%; margin-top: 20px; padding-bottom: 10px; min-height: 400px; background-color: red; border-style: solid; border-left-width: 3px;  border-left-color: white;border-right-width:0px;border-top-width:0px;border-bottom-width:0px;}

我包括了所有的CSS,因为我不确定究竟会对这种事情产生什么影响.此外,我已经尝试将sideContent和mainContent显示为内联,但它们似乎只是消失了.知道为什么吗？

Answer 1

如果你想让它们并排显示,为什么sideContent是mainContent的孩子？让他们兄弟姐妹然后使用:

float:left; display:inline; width: 49%;

对他们两个.

#mainContent, #sideContent {float:left; display:inline; width: 49%;}

Answer 2

您可以向父节点添加“display:flex”属性，以便所有子节点彼此相邻分组

#main{
      display:flex;
}