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显示为inline，但它们似乎只是消失了。你有什么想法吗？

- djs22

Answer 1

如果你想要它们并排显示，为什么要使sideContent成为mainContent的子元素？将它们变成兄弟节点，然后使用以下代码：

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

在它们两个上面。

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

- gianebao

---

我的错误，在我的实际实现中它们是兄弟节点。我已经仔细检查并编辑了原始帖子，很快会尝试您的实现。谢谢！ - djs22

完美地工作了，但出于某种原因，我不再继承背景。感谢您的帮助！我要去探索这个问题...任何建议都将是极好的！ - djs22

这是它吗？背景：蓝色；和背景颜色：红色；截图会很有帮助。 - gianebao

Answer 2

尝试使用“float”属性。这里有一个例子：http://jsfiddle.net/mLmHR/。

- Nikita Rybak

Answer 3

您可以在父节点中添加"display:flex"属性，以便所有子节点都排列在一起。

#main{
      display:flex;
}

- Tomás Gomez Pizarro