我如何排列在同一行的3个div？
有人可以帮助我解决这个问题，因为我一直在处理它很长一段时间….
我试图让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.comhttp://img.dovov.comgame_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; "> <a href="gfh" class="order-small"> <span>order</span></a> </div> 和另外两个是相同的divs请帮我把所有三个div在同一行上，右边一个在中间，一个在左边
我很惊讶没有人提供CSS表格布局作为解决scheme。
看看工作演示
纯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*/ }
看我的代码
<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 }
老主题，但也许有人会喜欢它。
小提琴链接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; }
这里有两个样本： http : //jsfiddle.net/H5q5h/1/
一个使用float:left和一个overflow:hidden包装overflow:hidden 。 包装确保包装的兄弟从包装下面开始。
第二个使用最近的display:inline-block和包装可以忽略。 但是旧版浏览器通常不支持这个function，所以不要轻视这个。 此外，项目之间的任何空白区域都会在项目div的左侧和右侧产生不必要的“空白”空白区域。
这是更容易，并为从未使用的无序/有序列表标签的目的。
在你的CSS中添加：
li{float: left;} //Sets float left property globally for all li tags.
然后添加你的HTML：
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
现在看完全排队！ 没有更多的表格和div的争论！
看看他们处理这个基础的快速原型框架相当不错，基本上他们允许你使用这样的HTML：
<div class="row"> <div class="four columns"> </div> <div class="four columns"> </div> <div class="four columns"> </div> </div>
这是我遇到的最简单的HTML / CSS网格系统，它基于12列网格。
基本上这些列是相对于父行给出一个％宽度和左边距。 他们的列浮动设置为左侧，位置设置为相对，并显示设置为阻止。
该行有几个属性设置，关心一个问题的核心，通常会导致包含div的高度为0，从而防止下面的div被按下。
你可以在这里find使用基础网格系统的例子： http : //foundation.zurb.com/docs/grid.php
如果你不想使用整个框架，下面的CSS应该用我提供的示例代码来实现：
.row:after { content: ""; clear: both; display: table; } .four.column { float: left; width: 33%; }
如果你真的特别想要一个左中心和右列，那么使用这样的代码：
CSS：
.row:after { content: ""; clear: both; display: table; } .left { float: left; width: 100px; } .center { margin: 0 auto; width: 100px; } .right { float: right; width: 100px; }
HTML：
<div class="row"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div>
只需要添加浮动左边的属性，你想使所有的div出现在一个行而不是最后一个。 这里是例子
<div> <div style="float: left;">A</div> <div style="float: left;">B</div> <div>C</div> </div>
把这些部门放在'td'标签里。 就这样完成了。
另一个可能的解
<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.comhttp://img.dovov.comgame_servers/sa-mp.jpg" class= "alignleft noTopMargin" style="width: 188px;" /> <a href="gfh" class="order-small"><span>order</span></a> </div> </div>
也有帮助。
