如何将三个div放在同一行？

Question

如何将三个div放在同一行？

85

有人能帮我解决这个问题吗？我已经处理了很长时间了...

我正在尝试将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放在同一行，一个在右边，一个在中间，一个在左边。

- Mr.Blue

欢迎来到 Stack Overflow。
通过换行、缩进等方式格式化您的 HTML 代码会让它更易于阅读。
您需要更清楚地说明您的需求。这些元素应该填满页面宽度还是使用它们的默认尺寸？

- vdbuilder

4

我为格式进行了编辑。对于新手要温柔一些，他们粘贴了HTML并应用了代码格式，这在我看来对于一个1级新手来说相当不错。 - Michael Durrant

1

@Michael Durrant 没错，作为第一篇帖子还不错。 - vdbuilder

我可以建议在涉及HTML的问题时，您可以使用jsfiddle（除了在此处显示之外）来演示问题。 - Marcin

请不要发布答案，除非它们回答了问题，请使用评论功能 :) - Tim Post

显示剩余2条评论

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wolf · Answer 1

另一个可能的解决方案：

<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>

同样也很有帮助。

- Luis Perez · Answer 2

看看这个基础快速原型框架，他们处理得非常好，基本上允许您像这样使用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被“推”下去。

您可以在此处找到使用Foundation网格系统的示例：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>