css – 如何在同一行上排列3个div?

有人可以帮助我这个问题,因为我一直在处理它很长时间了….

我试图得到3个divs在同一行上彼此相邻的一个divs看起来像这样:

<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在同一行一个在右边一个在中间和一个在左边

我很惊讶,没有人提供CSS表布局作为解决方案。

看看Working Demo

纯CSS 2.1,跨浏览器(IE8)

HTML:

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

CSS:

.Row
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column
{
    display: table-cell;
    background-color: red; /*Optional*/
}
http://stackoverflow.com/questions/8690841/how-do-i-line-up-3-divs-on-the-same-row

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – 如何在同一行上排列3个div?