如何在同一行上排列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.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">
<a href="gfh" class="order-small">
<span>order</span></a>
</div>

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

320236 次浏览
小开

看我的代码

.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}
<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>

小开

看看基础快速成型框架他们处理得很好，基本上他们允许你像这样使用 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 按照应该的方式被“推下”。

您可以在这里找到使用基础网格系统的示例: 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>
小开

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

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

第二个使用较新的 display:inline-block和包装可以忽略。但是老版本的浏览器通常不支持这个功能，所以对这个浏览器要小心谨慎。此外，项目之间的任何空白将导致在项目 div 的左侧和右侧出现不必要的“类似边距”的空白。

小开

把除法放在“ td”标签里，就这样。

小开

只需在所有要显示的 div 上添加 float left 属性，使其显示在不同于上一行的行中。这里有个例子

<div>
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</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 class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>

在 IE8 + 中工作

看看 JSFiddle 演示

小开

老话题，不过也许有人会喜欢。

小提琴连杆 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;
}
小开

另一种可能的解决办法是:

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

也很有帮助。

小开

这更简单，并且为从未使用过的无序/有序列表标记提供了用途。

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

现在看着它们完美地排成一排! 不要再为桌子和桌子争吵了！

小开

我不知道我是如何结束这篇文章的，但因为大多数的答案都是使用浮动，绝对定位，和其他选项，现在不是最佳的一天，我想我会给出一个新的答案，更新的标准(浮动不是真正的犹太教洁净了)。

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

小开

为什么不尝试使用 bootstrap 的解决方案呢? 如果你不想干涉表和浮动，那么它们是完美的。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->


<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>

不要干涉复杂的 CSS，最好的事情是你可以通过改变数字来编辑列的宽度。你可以在 https://getbootstrap.com/docs/4.0/layout/grid/找到更多的例子

小开

2019年答案 :

使用 CSS 网格:

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

提交答案