CSS 定位元素彼此相邻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3705804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Positioning Elements Next to each other
提问by djs22
I wondering if you can help me position two divs, mainContent and sideContent next to each other?
我想知道您是否可以帮助我将两个 div、mainContent 和 sideContent 放在一起放置？
HTML:
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;}
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?
我包含了所有的 css，因为我不确定到底什么会对这种事情产生影响。另外，我尝试将 sideContent 和 mainContent 显示为内联，但它们似乎消失了。知道为什么吗？
采纳答案by gianebao
If you want them to be displayed side by side, why is sideContent the child of mainContent? make them siblings then use:
如果您希望它们并排显示，为什么 sideContent 是 mainContent 的子项？让他们成为兄弟姐妹然后使用：
float:left; display:inline; width: 49%;
on both of them.
在他们两个上。
#mainContent, #sideContent {float:left; display:inline; width: 49%;}
回答by Nikita Rybak
Try floatproperty. Here's an example: http://jsfiddle.net/mLmHR/
试试float属性。这是一个例子：http: //jsfiddle.net/mLmHR/
