css - 如何在同一行排列 3 个 div？

Question

谁能帮我解决这个问题，因为我已经处理了很长时间了....

我试图让 3 个 div 在同一行上彼此相邻，其中一个 div 如下所示:

<div>  
  <h2 align="center">San Andreas: Multiplayer</h2>  
  <div align="center">
    <font size="+1">  
      <em class="heading_description">15 pence per slot</em>  
    </font>  
    <img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">  
    <a href="gfh" class="order-small">  
      <span>order</span></a>  
  </div>

另外两个是相同的 div 请帮我把所有三个 div 都放在同一行上，一个在右边，一个在中间，一个在左边

Answer 1

我很惊讶没有人将 CSS 表格布局作为解决方案:

.Row {
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column {
    display: table-cell;
    background-color: red; /*Optional*/
}

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>

适用于 IE8+

查看 JSFiddle Demo