如何在同一行排列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表布局作为解决方案.

看看工作演示

纯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*/
}

Answer 2

看我的代码

<div>
    <h2 align="center">San Andreas: Multiplayer</h2>
    <div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>

在你的css文件里面:

.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}

Answer 3

我不确定我是如何结束这篇文章的,但由于大多数答案都是使用花车,绝对定位以及其他一些现在不是最佳的选项,我想我会给出一个新的答案,更多的是它的标准日期(浮动不再是犹太洁食).

.parent {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 1 0px;
  border: 1px solid black;
}

<div class="parent">
    <div class="column">Column 1</div>
    <div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
    <div class="column">Column 3</div>
</div>

Answer 4

这里有两个样本:http://jsfiddle.net/H5q5h/1/

一个使用float:left和一个包装overflow:hidden.包装器确保包装器的兄弟从包装器下面开始.

第二个使用更新的display:inline-block包装器可以忽略不计.但旧版浏览器通常不支持此功能,因此请谨慎使用.此外,项目之间的任何空白区域都会在项目div的左侧和右侧产生不必要的"边缘"空白区域.

Answer 5

老话题,但也许有人会喜欢它.

小提琴链接http://jsfiddle.net/74ShU/

<div class="mainDIV">
    <div class="leftDIV"></div>
    <div class="middleDIV"></div>
    <div class="rightDIV"></div>
</div>

和css

.mainDIV{
    position:relative;
    background:yellow;
    width:100%;
    min-width:315px;
}
.leftDIV{
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:100px;
    background:red;
}
.middleDIV{
    height:50px;
    width:100px;
    background:blue;
    margin:0px auto;
}
.rightDIV{
    position:absolute;
    top:0px;
    right:0px;
    height:50px;
    width:100px;
    background:green;
}

Answer 6

2019年答案：

使用CSS网格：

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}