Html 如何在同一行上排列 3 个 div？

How do I line up 3 divs on the same row?

提问by Mr.Blue

Can someone please help me with this problem as i have been dealing with it for a long time now....

有人可以帮我解决这个问题，因为我已经处理了很长时间了....

I am trying to get 3 divs on the same line next to each other one of the divs looks like this:

我试图让 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>

and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left

其他两个是相同的 div 请帮我把所有三个 div 放在同一行，一个在右边，一个在中间，一个在左边

回答by avrahamcool

I'm surprised that nobody gave CSS table layout as a solution:

我很惊讶没有人将 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>

Works in IE8+

适用于 IE8+

Check out a JSFiddle Demo

查看JSFiddle 演示

回答by Gabriel Santos

See my code

看我的代码

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

回答by k2snowman69

I'm not sure how I ended up on this post but since most of the answers are using floats, absolute positioning, and other options which aren't optimal now a days, I figured I'd give a new answer that's more up to date on it's standards (float isn't really kosher anymore).

我不确定我是如何结束这篇文章的，但由于大多数答案都使用浮点数、绝对定位和其他现在不是最佳的选项，我想我会给出一个更适合的新答案日期上的标准（浮动不再是真正的犹太洁食了）。

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

回答by Joseph

here are two samples: http://jsfiddle.net/H5q5h/1/

这里有两个示例：http: //jsfiddle.net/H5q5h/1/

one uses float:leftand a wrapper with overflow:hidden. the wrapper ensures the sibling of the wrapper starts below the wrapper.

一个使用float:left和一个包装器overflow:hidden。包装器确保包装器的同级在包装器下方开始。

the 2nd one uses the more recent display:inline-blockand wrapper can be disregarded. but this is not generally supported by older browsers so tread lightly on this one. also, any white space between the items will cause an unnecessary "margin-like" white space on the left and right of the item divs.

第二个使用较新的display:inline-block并且可以忽略包装器。但这通常不受旧浏览器的支持，因此请轻视这一点。此外，项目之间的任何空白都会在项目 div 的左侧和右侧导致不必要的“类似边距”的空白。

回答by greko

Old topic but maybe someone will like it.

老话题，但也许有人会喜欢它。

fiddle link http://jsfiddle.net/74ShU/

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

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

and css

和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;
}

回答by mikemaccana

2019 answer:

2019 答案：

Using CSS grid:

使用 CSS 网格：

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

回答by faisalbhagat

Just add float left property on all the divs you want to make appear in a row other than last one. here is example

只需在要显示在除最后一行之外的所有 div 上的所有 div 上添加浮动左属性。这是例子

<div>
  <div style="float: left;">A</div>
  <div style="float: left;">B</div>
  <div>C</div>
</div>

回答by user6591908

This is easier and gives purpose to the never used unordered/ordered list tags.

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

In your CSS add:

在你的 CSS 添加：

    li{float: left;}  //Sets float left property globally for all li tags.

Then add in your HTML:

然后在你的 HTML 中添加：

    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>        
    </ul>

Now watch it all line up perfectly! No more arguing over tables vs divs!

现在看这一切都完美地排列起来！不再为表格与 div 争论不休！

回答by Luis Perez

Check out the foundation rapid prototyping framework they handled this quite nicely, basically they allow you to use HTML like this:

查看他们处理得很好的基础快速原型框架，基本上它们允许您像这样使用 HTML：

<div class="row">
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
</div>

This is the simplest HTML/CSS grid system that I've come across, it's based on 12 column grid.

这是我遇到的最简单的 HTML/CSS 网格系统，它基于 12 列网格。

Basically the columns are given a % width and left margin relative to the parent row. They columns have float set to left, position set to relative, and display set to block.

基本上，列被赋予相对于父行的 % 宽度和左边距。它们的列将浮动设置为左侧，位置设置为相对，显示设置为块。

The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting 'pushed' down as they should.

该行设置了几个属性，这些属性关心一个问题的核心，该问题通常会导致包含的 div 折叠到 0 的高度，从而防止以下 div 像它们应该的那样“下推”。

You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php

您可以在此处找到使用基础网格系统的示例：http: //foundation.zurb.com/docs/grid.php

If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:

如果你不想使用整个框架，下面的 CSS 应该可以用我提供的示例代码来解决：

.row:after {
    content: "";
    clear: both;
    display: table;
}

.four.column {
    float: left;
    width: 33%;
}

If you really specifically want a left center and right columns then use code like this:

如果你真的特别想要一个左中心和右列，那么使用这样的代码：

CSS:

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:

HTML：

<div class="row">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

回答by Itzkhan

Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.

为什么不尝试使用引导程序的解决方案。如果你不想干涉桌子和花车，它们是完美的。

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

No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/

无需干预复杂的 CSS，最好的是您可以通过更改数字来编辑列的宽度。您可以在https://getbootstrap.com/docs/4.0/layout/grid/找到更多示例