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

尝试float属性。这是一个例子：http://jsfiddle.net/mLmHR/

Answer 3

如果您不知道将使用多少元素，或者希望它们具有正常宽度，则唯一的另一种方法是使用表格：

<div id='main'> <table> <tbody>
  <tr>
    <td><div id='mainContent'></div></td>
    <td><div id='sideContent'></div></td>
  </tr>
</tbody> </table> </div>

CSS定位元素彼此相邻

3 个答案: