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的 child ？让他们成为 sibling 然后使用:

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

两者都有。

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