CSS定位元素彼此相邻 [英] CSS Positioning Elements Next to each other

问题描述

我想知道你能帮我把两个div，mainContent和sideContent放在一起吗？

I wondering if you can help me position two divs, mainContent and sideContent next to each other?

HTML：

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

CSS：
＃

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显示为内联，但它们似乎消失了。任何想法为什么？

I included all of the css because I wasn't sure what exactly would have an effect on this kind of thing. Also, I've tried making sideContent and mainContent display inline but they just seem to disappear. Any idea why?

推荐答案

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

If you want them to be displayed side by side, why is sideContent the child of mainContent? make them siblings then use:

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

。

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

这篇关于CSS定位元素彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！